Külgriba navigeerimismenüü koosneb tavaliselt vertikaalsest linkide loendist. Reactis saate luua linkide komplekti kasutades react-router-dom.
Järgige neid samme, et luua Reacti külgne navigeerimismenüü, mis sisaldab linke, mis sisaldavad olulisi kasutajaliidese ikoone. Kui lingid klõpsate, kuvatakse need erinevad lehed.
Reacti rakenduse loomine
Kui teil on juba a Reageeri projekt, liikuge julgelt järgmise sammu juurde.
Reacti kiireks käivitamiseks ja käivitamiseks saate kasutada käsku create-react-app. See installib teie eest kõik sõltuvused ja konfiguratsiooni.
Käivitage järgmine käsk, et luua React-projekt nimega react-sidenav.
npx luua-react-app react-sidenav
See loob alustamiseks kausta react-sidenav mõne failiga. Selle kausta pisut puhastamiseks liikuge src kausta ja asendage App.js sisu järgmisega:
importida './App.css';funktsiooniRakendus() {
tagasi (
<div klassiNimi="Rakendus"></div>
);
}
eksportidavaikimisi Rakendus;
Navigeerimiskomponendi loomine
Loodav navigeerimiskomponent näeb välja järgmine:
See on üsna lihtne, kuid kui olete lõpetanud, peaksite saama seda oma vajadustele vastavaks muuta. Navigeerimiskomponendi saate ahendada, kasutades ülaosas olevat topeltnooleikooni.
Alustage ahendatud vaate loomisega. Peale nooleikooni sisaldab külgriba üksuste loendit. Igal neist üksustest on ikoon ja tekst. Selle asemel, et iga elemendi jaoks korduvalt luua, saate salvestada iga üksuse andmed massiivi ja seejärel seda kaardifunktsiooni abil itereerida.
Demonstreerimiseks looge uus kaust nimega lib ja lisage uus fail nimega navData.js.
importida Koduikoon alates '@mui/icons-material/Home';
importida TravelExploreIcon alates '@mui/icons-material/TravelExplore';
importida BarChartIcon alates '@mui/icons-material/BarChart';
importida Seadeikoon alates '@mui/icons-material/Settings';
eksportidakonst navData = [
{
id: 0,
ikoon: <HomeIcon/>,
tekst: "Kodu",
link: "/"
},
{
ID: 1,
ikoon: <TravelExploreIcon/>,
tekst: "Uurige",
link: "uurida"
},
{
id: 2,
ikoon: <BarChartIcon/>,
tekst: "Statistika",
link: "statistika"
},
{
id: 3,
ikoon: <Seadeikoon/>,
tekst: "Seaded",
link: "seaded"
}
]
Ülaltoodud ikoonid pärinevad materjali kasutajaliidese teegist, nii et installige see esmalt selle käsuga:
npm installimine @mui/material @emotsioon/react @emotsioon/styled
npm installimine @mui/icons-material
Järgmisena looge kaust nimega Komponendid ja lisage uus komponent nimega Sidenav.js.
Importige selles failis navData failist ../lib ja looge selle jaoks skelett Sidenav funktsioon:
// Sidenav.js-s
importida { navData } alates "../lib/navData";
eksportidavaikimisifunktsiooniSidenav() {
tagasi (
<div>
</div>
)
}
Linkide loomiseks muutke selle komponendi element div järgmiselt:
<div>
<nupp className={styles.menuBtn}>
<KeyboardDouble ArrowLeftIcon />
</button>
{navData.map (üksus =>{
tagasi <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>See komponent loob navigeerimislingi, mis sisaldab ikooni ja lingi teksti iga kaardifunktsiooni iteratsiooni jaoks.
Nupuelement hoiab materjali kasutajaliidese teegi vasaknooleikooni. Importige see selle koodi abil komponendi ülaosas.
importida KlaviatuurDouble Arrow LeftIcon alates '@mui/icons-material/KeyboardDoubleArrowLeft';
Võib-olla olete märganud, et klassinimed viitavad stiiliobjektile. Seda seetõttu, et see õpetus kasutab CSS-mooduleid. CSS-moodulid võimaldavad teil Reactis luua kohaliku ulatusega stiile. Kui kasutasite selle projekti käivitamiseks käsku create-react-app, ei pea te midagi installima ega konfigureerima.
Looge kaustas Komponendid uus fail nimega sidenav.module.css ja lisage järgmine:
.sidenav {
laius: 250 pikslit;
üleminek: laius 0.3skergus sisse-välja;
kõrgus: 100vh;
taustavärv: rgb (10,25,41);
polsterdatud ülaosa: 28px;
}.sidenavSuletud {
koostab: sidenav;
üleminek: laius 0.3skergus sisse-välja;
laius: 60 pikslit
}.sideitem {
ekraan: flex;
joonda-elemendid: keskel;
polsterdus: 10px 20px;
kursor: kursor;
värv: #B2BAC2;
tekst-kaunistus: puudub;
}.linkTekst {
polster-vasak: 16px;
}.linkTextClosed {
koostab: linkText;
nähtavus: peidetud;
}.sideitem:hõljuma {
taustavärv: #244f7d1c;
}
.menuBtn {
joondada-ise: Keskus;
joondus-ise: painduv-alustada;
õigustama ennast: painduma-lõpp;
värv: #B2BAC2;
taustavärv: läbipaistev;
piir: puudub;
kursor: kursor;
polsterdus vasakpoolne: 20px;
}
Reacti ruuteri seadistamine
Kaardifunktsiooni tagastatud div-elemendid peaksid olema lingid. Reactis saate luua linke ja marsruute kasutades react-router-dom.
Installige terminalis react-router-dom npm kaudu.
npm install react-ruuter-dom@viimati
See käsk installib react-router-dom uusima versiooni.
Index.js-s mähitage rakenduse komponent ruuteriga.
importida Reageerige alates 'reageerida';
importida ReactDOM alates 'reageerimine/klient';
importida Rakendus alates './Rakendus';
importida { BrowserRouter } alates 'react-ruuter-dom';
konst root = ReactDOM.createRoot(dokument.getElementById('root'));
juur.renderdada(
<Reageerige. Range režiim>
<BrowserRouter>
<Rakendus />
</BrowserRouter>
</React.StrictMode>
);
Järgmisena lisage rakenduses App.js oma marsruudid.
importida {
brauserruuter,
Marsruudid,
Tee,
} alates "reageerida-ruuter-dom";importida './App.css';
importida Sidenav alates './Components/Sidenav';
importida Uurige alates "./Pages/Explore";
importida Kodu alates "./Pages/Home";
importida Seaded alates "./Pages/Settings";
importida Statistika alates "./Lehed/Statistika";
funktsiooniRakendus() {
tagasi (
<div klassiNimi="Rakendus">
<Sidenav/>
<peamine>
<Marsruudid>
<Marsruudi tee="/" element={<Kodu />}/>
<Marsruudi tee="/explore" element={<Uurige />} />
<Marsruudi tee="/statistics" element={<Statistika />}/>
<Marsruudi tee="/settings" element={<Seaded />} />
</Routes>
</main>
</div>
);
}
eksportidavaikimisi Rakendus;
Muutke App.css-i nende stiilidega.
keha {
marginaal: 0;
polsterdus: 0;
}.Rakendus {
ekraan: flex;
}
main {
polsterdus: 10px;
}
Iga marsruut tagastab erineva lehe olenevalt URL-ile edastatud URL-ist tee rekvisiidid. Looge uus kaust nimega Pages ja lisage neli komponenti – leht Avaleht, Uurimine, Statistika ja Seaded. Siin on näide:
eksportidavaikimisifunktsiooniKodu() {
tagasi (
<div>Kodu</div>
)
}
Kui külastate /home rada, peaksite nägema "Kodu".
Külgribal olevad lingid peaksid viima neile klõpsamisel vastavale lehele. Muutke rakenduses Sidenav.js kaardifunktsiooni, et elemendi div asemel kasutada NavLink komponenti react-router-dom.
{navData.map (üksus => {
tagasi <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Ärge unustage importida faili ülaosas asuvat NavLinki.
importida { NavLink } alates "react-ruuter-dom";
NavLink saab lingi URL-i tee lingi to prop kaudu.
Seni on navigeerimisriba avatud. Kui kasutaja klõpsab noolenupul, saate selle kokkupandavaks muutmiseks muuta selle laiust, muutes CSS-klassi. Seejärel saate CSS-klassi avamiseks uuesti muuta.
Selle lülitusfunktsiooni saavutamiseks peate teadma, millal külgriba on avatud ja suletud.
Selleks kasutage konksu useState. See Reageerimiskonks võimaldab teil funktsionaalses komponendis olekut lisada ja jälgida.
Looge failis sideNav.js avatud oleku konks.
konst [avatud, setopen] = useState(tõsi)
Muutke avatud olek tõeseks, nii et külgriba oleks rakenduse käivitamisel alati avatud.
Järgmisena looge funktsioon, mis lülitab selle oleku sisse.
konst toggleOpen = () => {
setopen (!avatud)
}
Nüüd saate kasutada avatud väärtust selliste dünaamiliste CSS-klasside loomiseks:
<div className={avatud? styles.sidenav: styles.sidenavClosed}>
<nupp className={styles.menuBtn} onClick={toggleOpen}>
{avatud? <KeyboardDouble ArrowLeftIcon />: <KeyboardDouble ArrowRightIcon />}
</button>
{navData.map (üksus =>{
tagasi <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={avatud? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Kasutatavad CSS-klasside nimed määratakse avatud oleku järgi. Näiteks kui open on tõene, on välimisel div elemendil sidenav klassi nimi. Vastasel juhul suletakse klass sidenavClosed.
Sama kehtib ka ikooni kohta, mis muutub külgriba sulgemisel paremnooleikooniks.
Ärge unustage seda importida.
importida KlaviatuurDouble ArrowRightIcon alates '@mui/icons-material/KeyboardDoubleArrowRight';
Külgriba komponent on nüüd kokkupandav.
Haara sellest täielik kood GitHubi hoidla ja proovige ise.
Reaktsioonikomponentide kujundamine
React muudab kokkupandava navigeerimiskomponendi loomise lihtsaks. Saate kasutada mõnda Reacti pakutavat tööriista, näiteks react-ruuter-dom, et käsitleda marsruutimist ja konkse, et jälgida kokkuvarisemist.
Komponentide stiilimiseks saate kasutada ka CSS-i mooduleid, kuigi te ei pea seda tegema. Kasutage neid kohaliku ulatusega klasside loomiseks, mis on kordumatud ja mida saate pakettfailidest välja raputada, kui neid ei kasutata.
