Šoninės juostos naršymo meniu paprastai sudaro vertikalus nuorodų sąrašas. „React“ galite sukurti nuorodų rinkinį naudodami „react-router-dom“.
Atlikite šiuos veiksmus, kad sukurtumėte šoninį „React“ naršymo meniu su nuorodomis su svarbiomis vartotojo sąsajos piktogramomis. Kai jas spustelėsite, nuorodos pateiks skirtingus puslapius.
„React“ programos kūrimas
Jei jau turite a Reaguoti projektą, nedvejodami pereikite prie kito veiksmo.
Galite naudoti komandą kurti-reaguoti-programą, kad greitai pradėtumėte ir paleistumėte React. Jis įdiegia visas priklausomybes ir konfigūraciją už jus.
Vykdykite šią komandą, kad sukurtumėte React projektą, vadinamą react-sidenav.
npx sukurti-react-app react-sidenav
Tai sukurs react-sidenav aplanką su kai kuriais failais, kad galėtumėte pradėti. Norėdami šiek tiek išvalyti šį aplanką, eikite į src aplanką ir pakeiskite App.js turinį šiuo:
importuoti './App.css';funkcijaProgramėlė() {
grąžinti (
<div className="Programėlė"></div>
);
}
eksportuotinumatytas Programėlė;
Navigacijos komponento kūrimas
Naršymo komponentas, kurį sukursite, atrodys taip:
Tai gana paprasta, bet kai baigsite, turėtumėte galėti jį modifikuoti, kad atitiktų jūsų poreikius. Naršymo komponentą galite sutraukti naudodami dvigubos rodyklės piktogramą viršuje:
Pradėkite kurdami nesutrauktą rodinį. Be rodyklės piktogramos, šoninėje juostoje yra elementų sąrašas. Kiekvienas iš šių elementų turi piktogramą ir tekstą. Užuot nuolat kūrę elementą kiekvienam elementui, galite saugoti kiekvieno elemento duomenis masyve ir kartoti jį naudodami žemėlapio funkciją.
Norėdami parodyti, sukurkite naują aplanką pavadinimu lib ir pridėkite naują failą pavadinimu navData.js.
importuoti Pradžios piktograma iš '@mui/icons-material/Home';
importuoti TravelExploreIcon iš „@mui/icons-material/TravelExplore“;
importuoti BarChartIcon iš „@mui/icons-material/BarChart“;
importuoti NustatymaiPiktograma iš „@mui/icons-material/Settings“;
eksportuotikonst navData = [
{
ID: 0,
piktograma: <HomeIcon/>,
tekstas: "Namai",
nuoroda: "/"
},
{
ID: 1,
piktograma: <TravelExploreIcon/>,
tekstas: "Naršyti",
nuoroda: "tyrinėti"
},
{
ID: 2,
piktograma: <BarChartIcon/>,
tekstas: "Statistika",
nuoroda: "statistika"
},
{
ID: 3,
piktograma: <NustatymaiIcon/>,
tekstas: "Nustatymai",
nuoroda: "nustatymus"
}
]
Aukščiau naudojamos piktogramos yra iš Material UI bibliotekos, todėl pirmiausia įdiekite ją naudodami šią komandą:
npm diegimas @mui/material @emocija/react @emocija/styled
npm diegimas @mui/icons-material
Tada sukurkite aplanką pavadinimu Komponentai ir pridėkite naują komponentą pavadinimu Sidenav.js.
Šiame faile importuokite navData iš ../lib ir sukurkite skeletą Sidenavas funkcija:
// Sidenav.js
importuoti { navData } iš "../lib/navData";
eksportuotinumatytasfunkcijaSidenavas() {
grąžinti (
<div>
</div>
)
}
Norėdami sukurti nuorodas, pakeiskite elementą div į šį komponentą:
<div>
<mygtukas className={styles.menuBtn}>
<KlaviatūraDoubleArrowLeftIcon />
</button>
{navData.map (elementas =>{
grąžinti <div raktas={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Šis komponentas sukuria navigacijos nuorodą, kurioje yra piktograma ir nuorodos tekstas kiekvienai žemėlapio funkcijos iteracijai.
Mygtuko elemente yra kairiosios rodyklės piktograma iš medžiagos vartotojo sąsajos bibliotekos. Importuokite jį komponento viršuje naudodami šį kodą.
importuoti KlaviatūraDoubleArrowLeftIcon iš „@mui/icons-material/KeyboardDoubleArrowLeft“;
Galbūt pastebėjote, kad klasių pavadinimai nurodo stilių objektą. Taip yra todėl, kad šioje pamokoje naudojami CSS moduliai. CSS moduliai leidžia kurti vietinės apimties stilius React. Jums nieko nereikia diegti ar konfigūruoti, jei šiam projektui pradėti naudojote „create-react-app“.
Aplanke Komponentai sukurkite naują failą pavadinimu sidenav.module.css ir pridėkite:
.sidenav {
plotis: 250 pikselių;
perėjimas: plotis 0.3slengvumas į išorę;
aukštis: 100vh;
fono spalva: rgb (10,25,41);
pamušalas-viršus: 28px;
}.sidenavUždaryta {
komponuoja: sidenav;
perėjimas: plotis 0.3slengvumas į išorę;
plotis: 60px
}.šalutinis elementas {
ekranas: lankstus;
lygiuoti elementus: centre;
užpildymas: 10 piks. 20 piks.;
žymeklis: rodyklė;
spalva: #B2BAC2;
tekstas-dekoravimas: nėra;
}.linkText {
užpildymas kairėje: 16 pikselių;
}.linkTextClosed {
sudaro: linkText;
matomumas: paslėptas;
}.šalutinis elementas:užveskite pelės žymeklį {
fono spalva: #244f7d1c;
}
.menuBtn {
lygiuoti-savarankiškai: centras;
lygiuotis: lankstus-pradėti;
pateisinti save: lankstytipabaiga;
spalva: #B2BAC2;
fono spalva: skaidri;
kraštinė: nėra;
žymeklis: rodyklė;
užpildymas kairėje: 20 pikselių;
}
React maršrutizatoriaus nustatymas
Žemėlapio funkcijos grąžinami div elementai turėtų būti nuorodos. Programoje „React“ galite kurti nuorodas ir maršrutus naudodami „react-router-dom“.
Terminale įdiekite react-router-dom per npm.
npm įdiegti react-router-dom@naujausia
Ši komanda įdiegia naujausią react-router-dom versiją.
Programoje Index.js apvyniokite programos komponentą su maršruto parinktuvu.
importuoti Reaguoti iš „reaguoti“;
importuoti ReactDOM iš 'react-dom/klientas';
importuoti Programėlė iš „./App“;
importuoti { Naršyklės maršrutizatorius } iš 'react-router-dom';
konst root = ReactDOM.createRoot(dokumentas.getElementById('root'));
šaknis.perteikti(
<Reaguoti. Griežtas režimas>
<BrowserRouter>
<Programėlė />
</BrowserRouter>
</React.StrictMode>
);
Tada programoje App.js pridėkite savo maršrutus.
importuoti {
Naršyklės maršrutizatorius,
Maršrutai,
Maršrutas,
} iš "react-router-dom";importuoti './App.css';
importuoti Sidenavas iš „./Components/Sidenav“;
importuoti Naršyti iš "./Pages/Explore";
importuoti Namai iš "./Pages/Home";
importuoti Nustatymai iš "./Puslapiai/Nustatymai";
importuoti Statistika iš "./Puslapiai/Statistika";
funkcijaProgramėlė() {
grąžinti (
<div className="Programėlė">
<Sidenavas/>
<pagrindinis>
<Maršrutai>
<Maršruto kelias="/" element={<Namai />}/>
<Maršruto kelias="/explore" element={<Naršyti />} />
<Maršruto kelias="/statistics" element={<Statistika />}/>
<Maršruto kelias="/settings" element={<Nustatymai />} />
</Routes>
</main>
</div>
);
}
eksportuotinumatytas Programėlė;
Modifikuokite App.css naudodami šiuos stilius.
kūnas {
paraštė: 0;
paminkštinimas: 0;
}.Programa {
ekranas: lankstus;
}
pagrindinis {
pamušalas: 10px;
}
Kiekvienas maršrutas grąžina skirtingą puslapį, priklausomai nuo URL, perduoto kelio rekvizitai. Sukurkite naują aplanką pavadinimu „Puslapiai“ ir pridėkite keturis komponentus – puslapį „Pagrindinis“, „Naršyti“, „Statistika“ ir „Nustatymai“. Štai pavyzdys:
eksportuotinumatytasfunkcijaNamai() {
grąžinti (
<div>Namai</div>
)
}
Jei lankotės /home kelyje, turėtumėte pamatyti „Home“.
Šoninėje juostoje esančios nuorodos turėtų nukreipti į atitinkamą puslapį, kai jas spustelėsite. Sidenav.js modifikuokite žemėlapio funkciją, kad vietoj div elemento būtų naudojamas NavLink komponentas iš react-router-dom.
{navData.map (elementas => {
grąžinti <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Nepamirškite importuoti „NavLink“ failo viršuje.
importuoti { NavLink } iš "react-router-dom";
„NavLink“ gauna nuorodos URL kelią per „to prop“.
Iki šiol naršymo juosta atidaryta. Kad jį būtų galima sutraukti, galite perjungti jo plotį pakeisdami CSS klasę, kai vartotojas spustelėja rodyklės mygtuką. Tada galite dar kartą pakeisti CSS klasę, kad ją atidarytumėte.
Norėdami pasiekti šią perjungimo funkciją, turite žinoti, kada šoninė juosta yra atidaryta ir uždaryta.
Tam naudokite kabliuką useState. Tai Reagavimo kabliukas leidžia pridėti ir sekti funkcinio komponento būseną.
SideNav.js sukurkite atviros būsenos kabliuką.
konst [atidaryti, setopen] = useState(tiesa)
Inicijuokite atvirą būseną į „true“, todėl šoninė juosta visada bus atidaryta, kai paleisite programą.
Tada sukurkite funkciją, kuri perjungs šią būseną.
konst toggleOpen = () => {
setopen (! atidaryti)
}
Dabar galite naudoti atvirąją vertę, kad sukurtumėte tokias dinamines CSS klases:
<div className={atidaryti? styles.sidenav: styles.sidenavClosed}>
<mygtukas className={styles.menuBtn} onClick={toggleOpen}>
{atviras? <KlaviatūraDoubleArrowLeftIcon />: <KlaviatūraDoubleArrowRightIcon />}
</button>
{navData.map (elementas =>{
grąžinti <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={atidaryti? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Naudojami CSS klasių pavadinimai bus nustatyti pagal atvirą būseną. Pavyzdžiui, jei atvira yra tiesa, išorinis div elementas turės sidenav klasės pavadinimą. Priešingu atveju klasė bus sidenavClosed.
Tas pats pasakytina ir apie piktogramą, kuri pasikeičia į dešinės rodyklės piktogramą, kai uždarote šoninę juostą.
Nepamirškite jo importuoti.
importuoti KlaviatūraDoubleArrowRightIcon iš „@mui/icons-material/KeyboardDoubleArrowRight“;
Dabar šoninės juostos komponentas yra sulankstomas.
Iš čia paimkite visą kodą GitHub saugykla ir pabandykite patys.
React komponentų stilius
„React“ leidžia nesudėtingai sukurti sulankstomą navigacijos komponentą. Galite naudoti kai kuriuos „React“ teikiamus įrankius, pvz., „react-router-dom“, kad tvarkytumėte maršrutą, ir „kablius“, kad stebėtumėte sutraukimo būseną.
Taip pat galite naudoti CSS modulius, kad sukurtumėte komponentų stilių, nors jums to nereikia. Naudokite juos kurdami vietines klases, kurios yra unikalios ir kurias galite pašalinti iš paketų failų, jei jie nenaudojami.