En navigasjonsmeny i sidefeltet består vanligvis av en vertikal liste med lenker. Du kan opprette et sett med lenker i React ved å bruke react-router-dom.
Følg disse trinnene for å lage en React-sidenavigasjonsmeny med lenker som inneholder materielle UI-ikoner. Linkene vil gjengi forskjellige sider når du klikker på dem.
Opprette en React-applikasjon
Hvis du allerede har en Reager prosjekt, gå gjerne videre til neste trinn.
Du kan bruke kommandoen create-react-app for å komme raskt i gang med React. Den installerer alle avhengigheter og konfigurasjon for deg.
Kjør følgende kommando for å lage et React-prosjekt kalt react-sidenav.
npx skape-react-app react-sidenav
Dette vil opprette en react-sidenav-mappe med noen filer for å komme i gang. For å rydde opp i denne mappen litt, naviger til src-mappen og erstatt innholdet i App.js med dette:
import './App.css';funksjonApp() {
komme tilbake (
<div klassenavn="App"></div>
);
}
eksportmisligholde App;
Opprette navigasjonskomponenten
Navigasjonskomponenten du skal lage vil se slik ut:
Det er ganske enkelt, men når du er ferdig, bør du kunne endre det slik at det passer dine behov. Du kan skjule navigasjonskomponenten ved å bruke dobbeltpilikonet øverst:
Start med å lage den ikke-skjulte visningen. Bortsett fra pilikonet, inneholder sidefeltet en liste over elementer. Hvert av disse elementene har et ikon og litt tekst. I stedet for gjentatte ganger å lage et element for hvert element, kan du lagre dataene for hvert element i en matrise og deretter iterere over det ved hjelp av en kartfunksjon.
For å demonstrere, lag en ny mappe kalt lib og legg til en ny fil kalt navData.js.
import HjemIkon fra '@mui/icons-material/Home';
import TravelExploreIcon fra '@mui/icons-material/TravelExplore';
import BarChartIcon fra '@mui/icons-material/BarChart';
import Innstillinger-ikon fra '@mui/icons-material/Innstillinger';
eksportkonst navData = [
{
id: 0,
ikon: <HomeIcon/>,
tekst: "Hjem",
link: "/"
},
{
id: 1,
ikon: <TravelExploreIcon/>,
tekst: "Utforske",
link: "utforske"
},
{
id: 2,
ikon: <BarChartIcon/>,
tekst: "Statistikk",
link: "statistikk"
},
{
id: 3,
ikon: <InnstillingerIkon/>,
tekst: "Innstillinger",
link: "innstillinger"
}
]
Ikonene som brukes ovenfor er fra Material UI-biblioteket, så installer det først ved å bruke denne kommandoen:
npm installere @mui/material @følelse/react @følelse/styled
npm installere @mui/icons-material
Deretter oppretter du en mappe som heter Komponenter og legg til en ny komponent kalt Sidenav.js.
I denne filen, importer navData fra ../lib og lag skjelettet for Sidenav funksjon:
// I Sidenav.js
import { navData } fra "../lib/navData";
eksportmisligholdefunksjonSidenav() {
komme tilbake (
<div>
</div>
)
}
For å lage koblingene, endre div-elementet i denne komponenten til dette:
<div>
<button className={styles.menuBtn}>
<KeyboardDouble ArrowLeftIcon />
</button>
{navData.map (element =>{
komme tilbake <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Denne komponenten lager en navigasjonslenke som inneholder ikonet og lenketeksten for hver iterasjon i kartfunksjonen.
Knappeelementet holder venstre pilikon fra Material UI-biblioteket. Importer den øverst i komponenten ved å bruke denne koden.
import KeyboardDouble ArrowLeftIcon fra '@mui/icons-material/KeyboardDoubleArrowLeft';
Du har kanskje også lagt merke til at klassenavnene refererer til et stilobjekt. Dette er fordi denne opplæringen bruker CSS-moduler. CSS-moduler lar deg lage stiler med lokalt omfang i React. Du trenger ikke å installere eller konfigurere noe hvis du brukte create-react-app for å starte dette prosjektet.
I Components-mappen oppretter du en ny fil som heter sidenav.module.css og legg til følgende:
.sidenav {
bredde: 250px;
overgang: bredde 0.3slette inn-ut;
høyde: 100vh;
bakgrunnsfarge: rgb (10,25,41);
polstring-topp: 28px;
}.sidenavStengt {
komponerer: sidenav;
overgang: bredde 0.3slette inn-ut;
bredde: 60px
}.sideelement {
display: flex;
align-items: center;
polstring: 10px 20px;
markør: peker;
farge: #B2BAC2;
tekst-dekorasjon: ingen;
}.linkText {
polstring-venstre: 16px;
}.linkTextClosed {
komponerer: linkText;
synlighet: skjult;
}.sideelement:sveve {
bakgrunnsfarge: #244f7d1c;
}
.menuBtn {
tilpasse-selv-: senter;
justere-selv: bøye-start;
rettferdiggjøre-selv: bøye-slutt;
farge: #B2BAC2;
bakgrunnsfarge: gjennomsiktig;
grense: ingen;
markør: peker;
polstring-venstre: 20px;
}
Sette opp React Router
div-elementene som returneres av kartfunksjonen skal være lenker. I React kan du lage lenker og ruter ved å bruke react-router-dom.
I terminalen, installer react-router-dom via npm.
npm installer react-router-dom@siste
Denne kommandoen installerer den nyeste versjonen av react-router-dom.
I Index.js, pakk inn app-komponenten med ruteren.
import Reagere fra 'reagere';
import ReactDOM fra 'reager-dom/klient';
import App fra './App';
import { BrowserRouter } fra 'reager-ruter-dom';
konst root = ReactDOM.createRoot(dokument.getElementById('root'));
rot.render(
<Reagere. StrictMode>
<Nettleserruter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Deretter legger du til rutene dine i App.js.
import {
Nettleserruter,
Ruter,
Rute,
} fra "reager-ruter-dom";import './App.css';
import Sidenav fra './Components/Sidenav';
import Utforske fra "./Pages/Explore";
import Hjem fra "./Sider/Hjem";
import Innstillinger fra "./Sider/Innstillinger";
import Statistikk fra "./Pages/Statistics";
funksjonApp() {
komme tilbake (
<div klassenavn="App">
<Sidenav/>
<hoved->
<Ruter>
<Rutebane="/" element={<Hjem />}/>
<Rutebane="/explore" element={<Utforsk />} />
<Rutebane="/statistics" element={<Statistikk />}/>
<Rutebane="/settings" element={<Innstillinger />} />
</Routes>
</main>
</div>
);
}
eksportmisligholde App;
Endre App.css med disse stilene.
kropp {
margin: 0;
polstring: 0;
}.App {
display: flex;
}
hoved {
polstring: 10px;
}
Hver rute returnerer en annen side avhengig av URL-en som sendes til sti rekvisitter. Opprett en ny mappe kalt Sider og legg til fire komponenter – Hjem, Utforsk, Statistikk og Innstillinger-siden. Her er et eksempel:
eksportmisligholdefunksjonHjem() {
komme tilbake (
<div>Hjem</div>
)
}
Hvis du besøker /hjemmebanen, bør du se "Hjem".
Linkene i sidefeltet skal føre til den samsvarende siden når du klikker på dem. I Sidenav.js, endre kartfunksjonen for å bruke NavLink-komponenten fra react-router-dom i stedet for div-elementet.
{navData.map (element => {
komme tilbake <NavLink key={item.id} className={styles.sideitem} til={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Husk å importere NavLink øverst i filen.
import { NavLink } fra "reager-ruter-dom";
NavLink mottar URL-banen for lenken gjennom til prop.
Frem til dette punktet er navigasjonslinjen åpen. For å gjøre det sammenleggbart kan du bytte bredde ved å endre CSS-klassen når en bruker klikker på pilknappen. Du kan deretter endre CSS-klassen igjen for å åpne den.
For å oppnå denne vekslingsfunksjonaliteten, må du vite når sidefeltet er åpent og lukket.
For dette, bruk useState-kroken. Dette Reagerkrok lar deg legge til og spore tilstanden i en funksjonell komponent.
I sideNav.js oppretter du kroken for åpen tilstand.
konst [open, setopen] = useState(ekte)
Initialiser åpen tilstand til sann, slik at sidefeltet alltid vil være åpent når du starter programmet.
Deretter oppretter du funksjonen som vil veksle mellom denne tilstanden.
konst toggleOpen = () => {
setopen(!open)
}
Du kan nå bruke den åpne verdien til å lage dynamiske CSS-klasser som dette:
<div klassenavn={åpen? styles.sidenav: styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{åpen? <KeyboardDouble ArrowLeftIcon />: <KeyboardDouble ArrowRightIcon />}
</button>
{navData.map (element =>{
komme tilbake <NavLink key={item.id} className={styles.sideitem} til={item.link}>
{item.icon}
<span className={åpen? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
CSS-klassenavnene som brukes vil bli bestemt av den åpne tilstanden. For eksempel, hvis open er sant, vil det ytre div-elementet ha et sidenav-klassenavn. Ellers vil klassen være sidenavStengt.
Dette er det samme for ikonet, som endres til høyre pilikon når du lukker sidefeltet.
Husk å importere den.
import KeyboardDouble ArrowRightIcon fra '@mui/icons-material/KeyboardDoubleArrowRight';
Sidepanelkomponenten er nå sammenleggbar.
Hent hele koden fra denne GitHub-depot og prøv selv.
Styling React-komponenter
React gjør det enkelt å bygge en sammenleggbar navigasjonskomponent. Du kan bruke noen av verktøyene som React gir som react-router-dom for å håndtere ruting og kroker for å holde styr på den kollapsede tilstanden.
Du kan også bruke CSS-moduler til å style komponenter, selv om du ikke trenger det. Bruk dem til å lage lokalt omfangsklasser som er unike og som du kan riste fra pakkefilene hvis de ikke er i bruk.