Ένα μενού πλοήγησης στην πλαϊνή γραμμή αποτελείται συνήθως από μια κατακόρυφη λίστα συνδέσμων. Μπορείτε να δημιουργήσετε ένα σύνολο συνδέσμων στο React χρησιμοποιώντας το react-router-dom.
Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε ένα πλευρικό μενού πλοήγησης React με συνδέσμους που περιέχουν εικονίδια UI υλικού. Οι σύνδεσμοι θα αποδώσουν διαφορετικές σελίδες όταν κάνετε κλικ σε αυτές.
Δημιουργία εφαρμογής React
Εάν έχετε ήδη ένα React project, μη διστάσετε να μεταβείτε στο επόμενο βήμα.
Μπορείτε να χρησιμοποιήσετε την εντολή create-react-app για να ξεκινήσετε και να εκτελείτε γρήγορα το React. Εγκαθιστά όλες τις εξαρτήσεις και τις ρυθμίσεις παραμέτρων για εσάς.
Εκτελέστε την ακόλουθη εντολή για να δημιουργήσετε ένα έργο React που ονομάζεται react-sidenav.
npx δημιουργώ-react-app react-sidenav
Αυτό θα δημιουργήσει έναν φάκελο react-sidenav με ορισμένα αρχεία για να ξεκινήσετε. Για να καθαρίσετε λίγο αυτόν τον φάκελο, μεταβείτε στον φάκελο src και αντικαταστήστε τα περιεχόμενα του App.js με αυτό:
εισαγωγή './App.css';λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<div className="App"></div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Δημιουργία του στοιχείου πλοήγησης
Το στοιχείο πλοήγησης που θα δημιουργήσετε θα μοιάζει με αυτό:
Είναι αρκετά απλό, αλλά μόλις τελειώσετε, θα πρέπει να μπορείτε να το τροποποιήσετε ώστε να ταιριάζει στις ανάγκες σας. Μπορείτε να συμπτύξετε το στοιχείο πλοήγησης χρησιμοποιώντας το εικονίδιο διπλού βέλους στην κορυφή:
Ξεκινήστε δημιουργώντας τη μη συμπτυγμένη προβολή. Εκτός από το εικονίδιο βέλους, η πλαϊνή γραμμή περιέχει μια λίστα στοιχείων. Κάθε ένα από αυτά τα στοιχεία έχει ένα εικονίδιο και κάποιο κείμενο. Αντί να δημιουργείτε επαναλαμβανόμενα ένα στοιχείο για το καθένα, μπορείτε να αποθηκεύσετε τα δεδομένα για κάθε στοιχείο σε έναν πίνακα και στη συνέχεια να επαναλάβετε πάνω του χρησιμοποιώντας μια συνάρτηση χάρτη.
Για επίδειξη, δημιουργήστε έναν νέο φάκελο που ονομάζεται lib και προσθέστε ένα νέο αρχείο που ονομάζεται navData.js.
εισαγωγή Αρχική Εικονίδιο από '@mui/icons-material/Home';
εισαγωγή Εικονίδιο TravelExplore από '@mui/icons-material/TravelExplore';
εισαγωγή BarChartIcon από '@mui/icons-material/BarChart';
εισαγωγή Εικονίδιο ρυθμίσεων από '@mui/icons-material/Settings';
εξαγωγήσυνθ navData = [
{
id: 0,
εικόνισμα: <Αρχική Εικονίδιο/>,
κείμενο: "Σπίτι",
Σύνδεσμος: "/"
},
{
id: 1,
εικόνισμα: <TravelExploreIcon/>,
κείμενο: "Εξερευνώ",
Σύνδεσμος: "εξερευνώ"
},
{
id: 2,
εικόνισμα: <BarChartIcon/>,
κείμενο: "Στατιστική",
Σύνδεσμος: "στατιστική"
},
{
id: 3,
εικόνισμα: <SettingsIcon/>,
κείμενο: "Ρυθμίσεις",
Σύνδεσμος: "Ρυθμίσεις"
}
]
Τα εικονίδια που χρησιμοποιούνται παραπάνω προέρχονται από τη βιβλιοθήκη Material UI, επομένως εγκαταστήστε τα πρώτα χρησιμοποιώντας αυτήν την εντολή:
npm εγκατάσταση @mui/material @συναισθημα/react @συναισθημα/styled
npm εγκατάσταση @mui/icons-material
Στη συνέχεια, δημιουργήστε έναν φάκελο που ονομάζεται Συστατικά και προσθέστε ένα νέο στοιχείο που ονομάζεται Sidenav.js.
Σε αυτό το αρχείο, εισαγάγετε το navData από το ../lib και δημιουργήστε τον σκελετό για το Σιντενάβ λειτουργία:
// Στο Sidenav.js
εισαγωγή { navData } από "../lib/navData";
εξαγωγήΠροκαθορισμένολειτουργίαΣιντενάβ() {
ΕΠΙΣΤΡΟΦΗ (
<div>
</div>
)
}
Για να δημιουργήσετε τους συνδέσμους, τροποποιήστε το στοιχείο div σε αυτό το στοιχείο σε αυτό:
<div>
<κουμπί className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map (στοιχείο =>{
ΕΠΙΣΤΡΟΦΗ <κλειδί div={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Αυτό το στοιχείο δημιουργεί έναν σύνδεσμο πλοήγησης που περιέχει το εικονίδιο και το κείμενο του συνδέσμου για κάθε επανάληψη στη λειτουργία χάρτη.
Το στοιχείο κουμπιού κρατά το εικονίδιο με το αριστερό βέλος από τη βιβλιοθήκη Material UI. Εισαγάγετε το στην κορυφή του στοιχείου χρησιμοποιώντας αυτόν τον κωδικό.
εισαγωγή KeyboardDoubleArrowLeftIcon από '@mui/icons-material/KeyboardDoubleArrowLeft';
Μπορεί επίσης να έχετε παρατηρήσει ότι τα ονόματα κλάσεων αναφέρονται σε ένα αντικείμενο στυλ. Αυτό συμβαίνει επειδή αυτό το σεμινάριο χρησιμοποιεί ενότητες CSS. Οι μονάδες CSS σάς επιτρέπουν να δημιουργείτε στυλ τοπικού εύρους στο React. Δεν χρειάζεται να εγκαταστήσετε ή να διαμορφώσετε τίποτα εάν χρησιμοποιήσατε το create-react-app για να ξεκινήσετε αυτό το έργο.
Στο φάκελο Components, δημιουργήστε ένα νέο αρχείο που ονομάζεται sidenav.module.css και προσθέστε τα εξής:
.sidenav {
πλάτος: 250 px;
μετάβαση: πλάτος 0.3sευκολία εισόδου;
Ύψος: 100vh;
χρώμα φόντου: rgb (10,25,41);
padding-top: 28px;
}.sidenavΚλειστό {
συνθέτει: sidenav;
μετάβαση: πλάτος 0.3sευκολία εισόδου;
πλάτος: 60 px
}.sideitem {
οθόνη: flex;
στοίχιση-στοιχεία: κέντρο;
padding: 10px 20px;
δρομέας: δείκτης;
χρώμα: #B2BAC2;
κείμενο-διακόσμηση: κανένα;
}.linkText {
padding-αριστερά: 16px;
}.linkTextClosed {
συνθέτει: linkText;
ορατότητα: κρυφό;
}.sideitem:φτερουγίζω {
χρώμα του φόντου: #244f7d1c;
}
.menuBtn {
ευθυγραμμίζω-εαυτός: κέντρο;
align-self: flex-αρχή;
δικαιολογώ τον εαυτό μου: flex-τέλος;
χρώμα: #B2BAC2;
Χρώμα φόντου: διαφανές.
σύνορο: κανένα;
δρομέας: δείκτης;
padding-αριστερά: 20px;
}
Ρύθμιση του δρομολογητή React
Τα στοιχεία div που επιστρέφονται από τη συνάρτηση χάρτη πρέπει να είναι σύνδεσμοι. Στο React, μπορείτε να δημιουργήσετε συνδέσμους και διαδρομές χρησιμοποιώντας το react-router-dom.
Στο τερματικό, εγκαταστήστε το react-router-dom μέσω npm.
npm εγκατάσταση react-router-dom@αργότερο
Αυτή η εντολή εγκαθιστά την πιο πρόσφατη έκδοση του react-router-dom.
Στο Index.js, τυλίξτε το στοιχείο App με το Router.
εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή ReactDOM από «react-dom/client»·
εισαγωγή App από './Εφαρμογή';
εισαγωγή { BrowserRouter } από 'react-router-dom';
συνθ root = ReactDOM.createRoot(έγγραφο.getElementById('root'));
ρίζα.καθιστώ(
<Αντιδρώ. StrictMode>
<BrowserRouter>
<Εφαρμογή />
</BrowserRouter>
</React.StrictMode>
);
Στη συνέχεια, στο App.js, προσθέστε τις διαδρομές σας.
εισαγωγή {
BrowserRouter,
Διαδρομές,
Διαδρομή,
} από "react-router-dom";εισαγωγή './App.css';
εισαγωγή Σιντενάβ από './Components/Sidenav';
εισαγωγή Εξερευνώ από "./Pages/Explore";
εισαγωγή Σπίτι από "./Σελίδες/Αρχική σελίδα";
εισαγωγή Ρυθμίσεις από "./Σελίδες/Ρυθμίσεις";
εισαγωγή Στατιστική από "./Σελίδες/Στατιστικά στοιχεία";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<div className="App">
<Sidenav/>
<κύριος>
<Διαδρομές>
<Διαδρομή διαδρομής="/" στοιχείο ={<Σπίτι />}/>
<Διαδρομή διαδρομής="/explore" στοιχείο ={<Εξερευνήστε />} />
<Διαδρομή διαδρομής="/statistics" στοιχείο ={<Στατιστικά />}/>
<Διαδρομή διαδρομής="/settings" στοιχείο ={<Ρυθμίσεις />} />
</Routes>
</main>
</div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Τροποποιήστε το App.css με αυτά τα στυλ.
σώμα {
περιθώριο: 0;
γέμιση: 0;
}.Εφαρμ {
οθόνη: flex;
}
κύριος {
padding: 10px;
}
Κάθε διαδρομή επιστρέφει μια διαφορετική σελίδα ανάλογα με τη διεύθυνση URL που διαβιβάστηκε στο στηρίγματα μονοπατιών. Δημιουργήστε έναν νέο φάκελο που ονομάζεται Σελίδες και προσθέστε τέσσερα στοιχεία — τη σελίδα Αρχική σελίδα, Εξερεύνηση, Στατιστικά στοιχεία και Ρυθμίσεις. Εδώ είναι ένα παράδειγμα:
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
ΕΠΙΣΤΡΟΦΗ (
<div>Σπίτι</div>
)
}
Εάν επισκεφτείτε τη διαδρομή /home, θα πρέπει να δείτε "Home".
Οι σύνδεσμοι στην πλαϊνή γραμμή πρέπει να οδηγούν στην αντίστοιχη σελίδα όταν κάνετε κλικ σε αυτούς. Στο Sidenav.js, τροποποιήστε τη συνάρτηση χάρτη για να χρησιμοποιήσετε το στοιχείο NavLink από το react-router-dom αντί για το στοιχείο div.
{navData.map (στοιχείο => {
ΕΠΙΣΤΡΟΦΗ <Κλειδί NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Θυμηθείτε να εισαγάγετε το NavLink στο επάνω μέρος του αρχείου.
εισαγωγή { NavLink } από "react-router-dom"?
Το NavLink λαμβάνει τη διαδρομή URL για τη σύνδεση μέσω του στηρίγματος προς.
Μέχρι αυτό το σημείο, η γραμμή πλοήγησης είναι ανοιχτή. Για να το κάνετε πτυσσόμενο, μπορείτε να αλλάξετε το πλάτος του αλλάζοντας την κλάση CSS όταν ένας χρήστης κάνει κλικ στο κουμπί βέλους. Στη συνέχεια, μπορείτε να αλλάξετε ξανά την κλάση CSS για να την ανοίξετε.
Για να επιτύχετε αυτήν τη λειτουργία εναλλαγής, πρέπει να γνωρίζετε πότε η πλαϊνή γραμμή είναι ανοιχτή και κλειστή.
Για αυτό, χρησιμοποιήστε το άγκιστρο useState. Αυτό React hook σας επιτρέπει να προσθέτετε και να παρακολουθείτε την κατάσταση σε ένα λειτουργικό στοιχείο.
Στο sideNav.js, δημιουργήστε το άγκιστρο για την ανοιχτή κατάσταση.
συνθ [open, setopen] = useState(αληθής)
Αρχικοποιήστε την ανοιχτή κατάσταση σε true, ώστε η πλαϊνή γραμμή να είναι πάντα ανοιχτή όταν ξεκινάτε την εφαρμογή.
Στη συνέχεια, δημιουργήστε τη συνάρτηση που θα αλλάξει αυτήν την κατάσταση.
συνθ toggleOpen = () => {
setopen(!open)
}
Τώρα μπορείτε να χρησιμοποιήσετε την ανοιχτή τιμή για να δημιουργήσετε δυναμικές κλάσεις CSS όπως αυτή:
<div className={open? styles.sidenav: styles.sidenavClosed}>
<κουμπί className={styles.menuBtn} onClick={toggleOpen}>
{Άνοιξε? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map (στοιχείο =>{
ΕΠΙΣΤΡΟΦΗ <Κλειδί NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={open? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Τα ονόματα κλάσεων CSS που χρησιμοποιούνται θα καθοριστούν από την ανοιχτή κατάσταση. Για παράδειγμα, εάν το open είναι true, το εξωτερικό στοιχείο div θα έχει όνομα κλάσης sidenav. Διαφορετικά, η τάξη θα είναι sidenavClosed.
Αυτό ισχύει για το εικονίδιο, το οποίο αλλάζει στο εικονίδιο με το δεξί βέλος όταν κλείνετε την πλαϊνή γραμμή.
Θυμηθείτε να το εισαγάγετε.
εισαγωγή Εικονίδιο KeyboardDoubleArrowRight από '@mui/icons-material/KeyboardDoubleArrowRight';
Το στοιχείο πλαϊνής γραμμής είναι πλέον πτυσσόμενο.
Πάρτε τον πλήρη κωδικό από αυτό Αποθετήριο GitHub και δοκιμάστε το μόνοι σας.
Styling React Components
Το React καθιστά εύκολη τη δημιουργία ενός πτυσσόμενου στοιχείου πλοήγησης. Μπορείτε να χρησιμοποιήσετε ορισμένα από τα εργαλεία που παρέχει το React, όπως το react-router-dom για να χειριστείτε τη δρομολόγηση και τα hook για να παρακολουθείτε την κατάσταση κατάρρευσης.
Μπορείτε επίσης να χρησιμοποιήσετε μονάδες CSS για να δημιουργήσετε στυλ στοιχείων, αν και δεν χρειάζεται. Χρησιμοποιήστε τα για να δημιουργήσετε κλάσεις τοπικού εύρους που είναι μοναδικές και τις οποίες μπορείτε να ανακινήσετε από τα αρχεία του πακέτου εάν δεν χρησιμοποιούνται.
