Sānjoslas navigācijas izvēlne parasti sastāv no vertikāla saišu saraksta. Varat izveidot saišu kopu programmā React, izmantojot react-router-dom.
Veiciet šīs darbības, lai izveidotu React sānu navigācijas izvēlni ar saitēm, kas satur materiāla lietotāja interfeisa ikonas. Saites atveidos dažādas lapas, kad uz tām noklikšķināsit.
React lietojumprogrammas izveide
Ja jums jau ir a Reaģēt projekts, nekautrējieties pāriet uz nākamo darbību.
Varat izmantot komandu Create-react-app, lai ātri sāktu darbu ar React. Tas instalē visas atkarības un konfigurāciju jūsu vietā.
Palaidiet šo komandu, lai izveidotu React projektu ar nosaukumu react-sidenav.
npx izveidot-react-app react-sidenav
Tādējādi tiks izveidota mape react-sidenav ar dažiem failiem, lai sāktu darbu. Lai mazliet iztīrītu šo mapi, dodieties uz mapi src un aizstājiet App.js saturu ar šo:
imports './App.css';funkcijuApp() {
atgriezties (
<div klasesNosaukums="App"></div>
);
}
eksportētnoklusējuma Lietotne;
Navigācijas komponenta izveide
Izveidotais navigācijas komponents izskatīsies šādi:
Tas ir diezgan vienkārši, taču, kad esat pabeidzis, jums vajadzētu būt iespējai to pārveidot atbilstoši savām vajadzībām. Varat sakļaut navigācijas komponentu, izmantojot dubultās bultiņas ikonu augšpusē:
Sāciet, izveidojot nesakļautu skatu. Sānjoslā ir ne tikai bultiņas ikona, bet arī vienumu saraksts. Katram no šiem vienumiem ir ikona un teksts. Tā vietā, lai atkārtoti izveidotu katram elementu, varat saglabāt katra vienuma datus masīvā un pēc tam to atkārtot, izmantojot kartes funkciju.
Lai demonstrētu, izveidojiet jaunu mapi ar nosaukumu lib un pievienojiet jaunu failu ar nosaukumu navData.js.
imports Sākuma ikona no '@mui/icons-material/Home';
imports TravelExploreIcon no '@mui/icons-material/TravelExplore';
imports BarChartIcon no '@mui/icons-material/BarChart';
imports IestatījumiIkona no '@mui/icons-material/Settings';
eksportētkonst navData = [
{
id: 0,
ikona: <HomeIcon/>,
teksts: "Mājas",
saite: "/"
},
{
id: 1,
ikona: <TravelExploreIcon/>,
teksts: "Izpētīt",
saite: "izpētīt"
},
{
id: 2,
ikona: <BarChartIcon/>,
teksts: "Statistika",
saite: "statistika"
},
{
id: 3,
ikona: <IestatījumiIkona/>,
teksts: "Iestatījumi",
saite: "iestatījumi"
}
]
Iepriekš izmantotās ikonas ir no Material UI bibliotēkas, tāpēc vispirms instalējiet to, izmantojot šo komandu:
npm instalēšana @mui/material @emocija/react @emocija/styled
npm instalēšana @mui/icons-material
Pēc tam izveidojiet mapi ar nosaukumu Sastāvdaļas un pievienojiet jaunu komponentu ar nosaukumu Sidenav.js.
Šajā failā importējiet navData no ../lib un izveidojiet skeletu Sidenav funkcija:
// Vietnē Sidenav.js
imports { navData } no "../lib/navData";
eksportētnoklusējumafunkcijuSidenav() {
atgriezties (
<div>
</div>
)
}
Lai izveidotu saites, modificējiet div elementu šajā komponentā uz šo:
<div>
<poga className={styles.menuBtn}>
<TastatūraDoubleArrowLeftIcon />
</button>
{navData.map (vienums =>{
atgriezties <div atslēga={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Šis komponents izveido navigācijas saiti, kas satur ikonu un saites tekstu katrai iterācijai kartes funkcijā.
Pogas elements satur kreisās bultiņas ikonu no Materiāla lietotāja interfeisa bibliotēkas. Importējiet to komponenta augšdaļā, izmantojot šo kodu.
imports TastatūraDoubleArrowLeftIcon no '@mui/icons-material/KeyboardDoubleArrowLeft';
Jūs, iespējams, arī pamanījāt, ka klašu nosaukumi atsaucas uz stilu objektu. Tas ir tāpēc, ka šajā apmācībā tiek izmantoti CSS moduļi. CSS moduļi ļauj programmā React izveidot lokāli aptvertus stilus. Jums nekas nav jāinstalē vai jākonfigurē, ja šī projekta sākšanai izmantojāt lietotni Create-react-app.
Mapē Komponenti izveidojiet jaunu failu ar nosaukumu sidenav.module.css un pievienojiet sekojošo:
.sidenav {
platums: 250 pikseļi;
pāreja: platums 0.3svieglums iekšā-out;
augstums: 100vh;
fona krāsa: rgb (10,25,41);
polsterējums augšpusē: 28 pikseļi;
}.sidenavSlēgts {
komponē: sidenav;
pāreja: platums 0.3svieglums iekšā-out;
platums: 60 pikseļi
}.sideitem {
displejs: flex;
izlīdzināt vienumus: centrs;
polsterējums: 10 pikseļi 20 pikseļi;
kursors: rādītājs;
krāsa: #B2BAC2;
teksta noformējums: nav;
}.linkTeksts {
polsterējums pa kreisi: 16 pikseļi;
}.linkTextClosed {
sastāda: linkText;
redzamība: slēpta;
}.sideitem:virziet kursoru {
fona krāsa: #244f7d1c;
}
.menuBtn {
izlīdzināt-sevi: centrs;
izlīdzināt: flex-sākt;
attaisnot sevi: flex-beigas;
krāsa: #B2BAC2;
fona krāsa: caurspīdīga;
robeža: nav;
kursors: rādītājs;
polsterējums pa kreisi: 20 pikseļi;
}
React maršrutētāja iestatīšana
Kartes funkcijas atgrieztajiem div elementiem jābūt saitēm. Programmā React varat izveidot saites un maršrutus, izmantojot react-router-dom.
Terminālī instalējiet react-router-dom, izmantojot npm.
npm instalējiet react-router-dom@jaunākais
Šī komanda instalē jaunāko react-router-dom versiju.
Programmā Index.js aptiniet lietotnes komponentu ar maršrutētāju.
imports Reaģēt no "reaģēt";
imports ReactDOM no 'react-dom/client';
imports App no './Lietotne';
imports { BrowserRouter } no 'react-router-dom';
konst root = ReactDOM.createRoot(dokumentu.getElementById('root'));
sakne.renderēt(
<Reaģēt. StrictMode>
<BrowserRouter>
<Lietotne />
</BrowserRouter>
</React.StrictMode>
);
Pēc tam programmā App.js pievienojiet savus maršrutus.
imports {
Browser Router,
Maršruti,
Maršruts,
} no "reaģēt-router-dom";imports './App.css';
imports Sidenav no './Components/Sidenav';
imports Izpētīt no "./Pages/Explore";
imports Mājas no "./Pages/Home";
imports Iestatījumi no "./Lapas/Iestatījumi";
imports Statistika no "./Lapas/Statistika";
funkcijuApp() {
atgriezties (
<div klasesNosaukums="App">
<Sidenava/>
<galvenais>
<Maršruti>
<Maršruta ceļš="/" elements={<Mājas />}/>
<Maršruta ceļš="/explore" elements={<Izpētīt />} />
<Maršruta ceļš="/statistics" elements={<Statistika />}/>
<Maršruta ceļš="/settings" elements={<Iestatījumi />} />
</Routes>
</main>
</div>
);
}
eksportētnoklusējuma Lietotne;
Modificējiet App.css ar šiem stiliem.
body {
piemale: 0;
polsterējums: 0;
}.Lietotne {
displejs: flex;
}
galvenais {
polsterējums: 10 pikseļi;
}
Katrs maršruts atgriež citu lapu atkarībā no URL, kas tiek nosūtīts ceļa rekvizīti. Izveidojiet jaunu mapi ar nosaukumu Lapas un pievienojiet četrus komponentus — lapu Sākums, Izpētīt, Statistika un Iestatījumi. Šeit ir piemērs:
eksportētnoklusējumafunkcijuMājas() {
atgriezties (
<div>Mājas</div>
)
}
Ja apmeklējat /home ceļu, jums vajadzētu redzēt "Home".
Noklikšķinot uz sānjoslas saitēm, jānovirza uz atbilstošo lapu. Vietnē Sidenav.js modificējiet kartes funkciju, lai div elementa vietā izmantotu NavLink komponentu no react-router-dom.
{navData.map (vienums => {
atgriezties <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Neaizmirstiet importēt NavLink faila augšdaļā.
imports { NavLink } no "react-router-dom";
NavLink saņem saites URL ceļu, izmantojot to prop.
Līdz šim brīdim navigācijas josla ir atvērta. Lai padarītu to saliekamu, varat pārslēgt tā platumu, mainot CSS klasi, kad lietotājs noklikšķina uz bultiņas pogas. Pēc tam varat vēlreiz mainīt CSS klasi, lai to atvērtu.
Lai sasniegtu šo pārslēgšanas funkcionalitāti, jums jāzina, kad sānjosla ir atvērta un aizvērta.
Šim nolūkam izmantojiet āķi useState. Šis Reakcijas āķis ļauj pievienot un izsekot stāvokli funkcionālajā komponentā.
Vietnē sideNav.js izveidojiet atvērtā stāvokļa āķi.
konst [open, setopen] = useState(taisnība)
Inicializējiet atvērto stāvokli uz True, lai sānjosla vienmēr būtu atvērta, kad startēsiet lietojumprogrammu.
Pēc tam izveidojiet funkciju, kas pārslēgs šo stāvokli.
konst toggleOpen = () => {
setopen (!atvērts)
}
Tagad varat izmantot atvērto vērtību, lai izveidotu dinamiskas CSS klases, piemēram:
<div className={atvērt? styles.sidenav: styles.sidenavClosed}>
<poga className={styles.menuBtn} onClick={toggleOpen}>
{atvērts? <TastatūraDoubleArrowLeftIcon />: <TastatūraDoubleArrowRightIcon />}
</button>
{navData.map (vienums =>{
atgriezties <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={atvērt? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Izmantotos CSS klašu nosaukumus noteiks atvērtais stāvoklis. Piemēram, ja atvērtā vērtība ir patiesa, ārējam div elementam būs sidenav klases nosaukums. Pretējā gadījumā klase būs sidenavClosed.
Tas pats attiecas uz ikonu, kas, aizverot sānjoslu, mainās uz labās bultiņas ikonu.
Atcerieties to importēt.
imports TastatūraDoubleArrowRightIcon no '@mui/icons-material/KeyboardDoubleArrowRight';
Sānjoslas komponents tagad ir saliekams.
Satveriet visu kodu no šī GitHub repozitorijs un izmēģiniet to pats.
Styling React komponenti
React ļauj vienkārši izveidot saliekamu navigācijas komponentu. Varat izmantot dažus no React nodrošinātajiem rīkiem, piemēram, react-router-dom, lai apstrādātu maršrutēšanu, un āķus, lai izsekotu sakļautajam stāvoklim.
Varat arī izmantot CSS moduļus, lai veidotu komponentus, lai gan jums tas nav jādara. Izmantojiet tos, lai izveidotu lokālas klases, kas ir unikālas un kuras varat izkratīt no komplekta failiem, ja tās netiek izmantotas.
