Un meniu de navigare din bara laterală constă de obicei dintr-o listă verticală de link-uri. Puteți crea un set de legături în React folosind react-router-dom.
Urmați acești pași pentru a crea un meniu de navigare lateral React cu link-uri care conțin pictograme materiale UI. Linkurile vor reda pagini diferite atunci când faceți clic pe ele.
Crearea unei aplicații React
Dacă aveți deja un Proiectul React, nu ezitați să treceți la pasul următor.
Puteți utiliza comanda create-react-app pentru a începe rapid cu React. Instalează toate dependențele și configurația pentru tine.
Rulați următoarea comandă pentru a crea un proiect React numit react-sidenav.
npx crea-react-app react-sidenav
Acest lucru va crea un folder react-sidenav cu câteva fișiere pentru a începe. Pentru a curăța puțin acest folder, navigați la folderul src și înlocuiți conținutul App.js cu acesta:
import './App.css';funcţieApp() {
întoarcere (
<div className="App"></div>
);
}
exportMod implicit Aplicație;
Crearea componentei de navigare
Componenta de navigare pe care o veți crea va arăta astfel:
Este destul de simplu, dar odată ce ați terminat, ar trebui să îl puteți modifica pentru a se potrivi nevoilor dvs. Puteți restrânge componenta de navigare folosind pictograma săgeată dublă din partea de sus:
Începeți prin a crea vizualizarea nerestrânsă. În afară de pictograma săgeată, bara laterală conține o listă de articole. Fiecare dintre aceste elemente are o pictogramă și un text. În loc să creați în mod repetat un element pentru fiecare, puteți stoca datele pentru fiecare articol într-o matrice și apoi puteți repeta peste el folosind o funcție de hartă.
Pentru a demonstra, creați un folder nou numit lib și adăugați un fișier nou numit navData.js.
import HomeIcoana din „@mui/icons-material/Home”;
import TravelExploreIcon din „@mui/icons-material/TravelExplore”;
import BarChartIcon din „@mui/icons-material/BarChart”;
import Pictogramă Setări din „@mui/icons-material/Settings”;
exportconst navData = [
{
id: 0,
pictograma: <Acasăpictogramă/>,
text: "Acasă",
legătură: "/"
},
{
id: 1,
pictograma: <TravelExploreIcon/>,
text: "Explora",
legătură: "explora"
},
{
id: 2,
pictograma: <BarChartIcon/>,
text: "Statistici",
legătură: "statistici"
},
{
id: 3,
pictograma: <Pictogramă Setări/>,
text: "Setări",
legătură: "setări"
}
]
Pictogramele folosite mai sus sunt din biblioteca Material UI, așa că instalați-o mai întâi folosind această comandă:
instalare npm @mui/material @emoţie/react @emoţie/styled
instalare npm @mui/icons-material
Apoi, creați un folder numit Componente și adăugați o nouă componentă numită Sidenav.js.
În acest fișier, importați navData din ../lib și creați scheletul pentru Sidenav funcţie:
// În Sidenav.js
import { navData } din „../lib/navData”;
exportMod implicitfuncţieSidenav() {
întoarcere (
<div>
</div>
)
}
Pentru a crea legăturile, modificați elementul div din această componentă astfel:
<div>
<butonul className={styles.menuBtn}>
<TastaturăDoubleArrowLeftIcon />
</button>
{navData.map (articol =>{
întoarcere <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Această componentă creează un link de navigare care conține pictograma și textul linkului pentru fiecare iterație din funcția de hartă.
Elementul buton deține pictograma săgeată la stânga din biblioteca Material UI. Importați-l în partea de sus a componentei folosind acest cod.
import TastaturăDoubleArrowLeftIcon din „@mui/icons-material/KeyboardDoubleArrowLeft”;
S-ar putea să fi observat, de asemenea, că numele claselor fac referire la un obiect de stiluri. Acest lucru se datorează faptului că acest tutorial folosește module CSS. Modulele CSS vă permit să creați stiluri locale în React. Nu trebuie să instalați sau să configurați nimic dacă ați folosit create-react-app pentru a începe acest proiect.
În folderul Componente, creați un fișier nou numit sidenav.module.css și adăugați următoarele:
.sidenav {
latime: 250px;
tranziție: lăţime 0.3sușurință-in-out;
inaltime: 100vh;
culoare de fundal: rgb (10,25,41);
padding-top: 28px;
}.sidenavÎnchis {
compune: sidenav;
tranziție: lăţime 0.3sușurință-in-out;
latime: 60px
}.sideitem {
display: flex;
alinierea elementelor: centru;
umplutură: 10px 20px;
cursor: pointer;
culoare: #B2BAC2;
text-decor: niciuna;
}.linkText {
padding-stânga: 16px;
}.linkTextClosed {
compune: linkText;
vizibilitate: ascuns;
}.sideitem:planare {
culoare de fundal: #244f7d1c;
}
.meniuBtn {
alinia-de sine: centru;
align-self: flex-start;
justify-self: flex-Sfârşit;
culoare: #B2BAC2;
culoare de fundal: transparent;
chenar: niciunul;
cursor: pointer;
padding-stânga: 20px;
}
Configurarea routerului React
Elementele div returnate de funcția hartă ar trebui să fie legături. În React, puteți crea legături și rute folosind react-router-dom.
În terminal, instalați react-router-dom prin npm.
npm instalează react-router-dom@cele mai recente
Această comandă instalează cea mai recentă versiune de react-router-dom.
În Index.js, împachetați componenta App cu routerul.
import Reacţiona din 'reacţiona';
import ReactDOM din 'react-dom/client';
import App din „./Aplicație”;
import { BrowserRouter } din 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('rădăcină'));
rădăcină.face(
<Reacţiona. StrictMode>
<BrowserRouter>
<Aplicație />
</BrowserRouter>
</React.StrictMode>
);
Apoi, în App.js, adăugați rutele.
import {
BrowserRouter,
trasee,
Traseu,
} din "reacţionează-router-dom";import './App.css';
import Sidenav din './Componente/Sidenav';
import Explora din „./Pagini/Explorare”;
import Acasă din „./Pagini/Acasă”;
import Setări din „./Pagini/Setări”;
import Statistici din „./Pagini/Statistici”;
funcţieApp() {
întoarcere (
<div className="App">
<Sidenav/>
<principal>
<Trasee>
<Calea traseului="/" element={<Acasă />}/>
<Calea traseului="/explore" element={<Explorați />} />
<Calea traseului="/statistics" element={<Statistici />}/>
<Calea traseului="/settings" element={<Setări />} />
</Routes>
</main>
</div>
);
}
exportMod implicit Aplicație;
Modificați App.css cu aceste stiluri.
corp {
marja: 0;
umplutură: 0;
}.Aplicația {
display: flex;
}
principal {
umplutură: 10px;
}
Fiecare rută returnează o pagină diferită, în funcție de adresa URL transmisă către recuzită de cale. Creați un dosar nou numit Pagini și adăugați patru componente — pagina Acasă, Explorare, Statistici și Setări. Iată un exemplu:
exportMod implicitfuncţieAcasă() {
întoarcere (
<div>Acasă</div>
)
}
Dacă vizitați calea /home, ar trebui să vedeți „Acasă”.
Linkurile din bara laterală ar trebui să conducă la pagina potrivită atunci când faceți clic pe ele. În Sidenav.js, modificați funcția map pentru a utiliza componenta NavLink din react-router-dom în loc de elementul div.
{navData.map (articol => {
întoarcere <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Nu uitați să importați NavLink în partea de sus a fișierului.
import { NavLink } din "react-router-dom";
NavLink primește calea URL pentru link prin prop.
Până în acest moment, bara de navigare este deschisă. Pentru a-l face pliabil, îi puteți comuta lățimea schimbând clasa CSS atunci când un utilizator dă clic pe butonul săgeată. Apoi puteți schimba din nou clasa CSS pentru a o deschide.
Pentru a obține această funcționalitate de comutare, trebuie să știți când bara laterală este deschisă și închisă.
Pentru aceasta, utilizați cârligul useState. Acest Cârlig de reacție vă permite să adăugați și să urmăriți starea într-o componentă funcțională.
În sideNav.js, creați cârligul pentru starea deschisă.
const [deschide, setopen] = useState(Adevărat)
Inițializați starea deschisă la adevărat, astfel încât bara laterală va fi întotdeauna deschisă când porniți aplicația.
Apoi, creați funcția care va comuta această stare.
const toggleOpen = () => {
setopen(!deschide)
}
Acum puteți utiliza valoarea deschisă pentru a crea clase CSS dinamice, astfel:
<div className={deschis? styles.sidenav: styles.sidenavClosed}>
<butonul className={styles.menuBtn} onClick={toggleOpen}>
{deschis? <TastaturăDoubleArrowLeftIcon />: <TastaturăDoubleArrowRightIcon />}
</button>
{navData.map (articol =>{
întoarcere <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={deschis? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Numele de clasă CSS utilizate vor fi determinate de starea deschisă. De exemplu, dacă open este adevărat, elementul exterior div va avea un nume de clasă sidenav. În caz contrar, clasa va fi sidenavClosed.
Acest lucru este același pentru pictograma, care se schimbă în pictograma săgeată la dreapta când închideți bara laterală.
Nu uitați să-l importați.
import TastaturăDoubleArrowRightIcon din „@mui/icons-material/KeyboardDoubleArrowRight”;
Componenta barei laterale este acum pliabilă.
Luați codul complet din acesta Depozitul GitHub si incearca si tu.
Styling React Components
React simplifică construirea unei componente de navigare pliabilă. Puteți folosi unele dintre instrumentele pe care React le oferă, cum ar fi react-router-dom, pentru a gestiona rutarea și cârlige pentru a ține evidența stării de colaps.
De asemenea, puteți utiliza module CSS pentru a stila componentele, deși nu este necesar. Folosiți-le pentru a crea clase cu scop local care sunt unice și pe care le puteți scutura din fișierele pachetului dacă nu sunt utilizate.