Navigacijski izbornik bočne trake obično se sastoji od okomitog popisa veza. Možete stvoriti skup poveznica u Reactu koristeći react-router-dom.
Slijedite ove korake za izradu React bočnog navigacijskog izbornika s vezama koje sadrže materijalne ikone korisničkog sučelja. Veze će prikazati različite stranice kada ih kliknete.
Izrada React aplikacije
Ako već imate a Projekt React, slobodno prijeđite na sljedeći korak.
Možete upotrijebiti naredbu create-react-app kako biste brzo pokrenuli React. Instalira sve ovisnosti i konfiguraciju umjesto vas.
Pokrenite sljedeću naredbu za stvaranje React projekta pod nazivom react-sidenav.
npx stvoriti-react-aplikacija react-sidenav
Ovo će stvoriti mapu react-sidenav s nekim datotekama za početak. Da biste malo očistili ovu mapu, idite do mape src i zamijenite sadržaj App.js s ovim:
uvoz './App.css';funkcijaaplikacija() {
povratak (
<div className="aplikacija"></div>
);
}
izvozzadano aplikacija;
Stvaranje navigacijske komponente
Navigacijska komponenta koju ćete izraditi izgledat će ovako:
Prilično je jednostavan, ali kada završite, trebali biste ga moći modificirati kako bi odgovarao vašim potrebama. Navigacijsku komponentu možete sažeti pomoću ikone dvostruke strelice na vrhu:
Započnite stvaranjem nesažetog prikaza. Osim ikone strelice, bočna traka sadrži popis stavki. Svaka od ovih stavki ima ikonu i tekst. Umjesto ponavljajućeg stvaranja elementa za svaki, možete pohraniti podatke za svaku stavku u nizu i zatim ga ponavljati pomoću funkcije karte.
Za demonstraciju, stvorite novu mapu pod nazivom lib i dodajte novu datoteku pod nazivom navData.js.
uvoz HomeIcon iz '@mui/icons-material/Home';
uvoz TravelExploreIcon iz '@mui/icons-material/TravelExplore';
uvoz BarChartIcon iz '@mui/icons-material/BarChart';
uvoz Ikona postavki iz '@mui/icons-material/Postavke';
izvozkonst navData = [
{
id: 0,
ikona: <HomeIcon/>,
tekst: "Dom",
veza: "/"
},
{
id: 1,
ikona: <TravelExploreIcon/>,
tekst: "Istražiti",
veza: "istražiti"
},
{
id: 2,
ikona: <BarChartIcon/>,
tekst: "Statistika",
veza: "statistika"
},
{
id: 3,
ikona: <Ikona postavki/>,
tekst: "postavke",
veza: "postavke"
}
]
Gore korištene ikone su iz biblioteke Material UI, pa je prvo instalirajte pomoću ove naredbe:
npm instalirati @mui/material @emocija/react @emocija/styled
npm instalirati @mui/icons-material
Zatim stvorite mapu pod nazivom Komponente i dodati novu komponentu tzv Sidenav.js.
U ovu datoteku uvezite navData iz ../lib i stvorite kostur za Sidenav funkcija:
// U Sidenav.js
uvoz {navData} iz "../lib/navData";
izvozzadanofunkcijaSidenav() {
povratak (
<div>
</div>
)
}
Da biste stvorili veze, izmijenite element div u ovoj komponenti na ovo:
<div>
<gumb className={styles.menuBtn}>
<TipkovnicaDoubleArrowLeftIcon />
</button>
{navData.map (stavka =>{
povratak <div ključ={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Ova komponenta stvara navigacijsku vezu koja sadrži ikonu i tekst veze za svaku iteraciju u funkciji karte.
Element gumba sadrži ikonu strelice lijevo iz biblioteke korisničkog sučelja materijala. Uvezite ga na vrh komponente pomoću ovog koda.
uvoz KeyboardDoubleArrowLeftIcon iz '@mui/icons-material/KeyboardDoubleArrowLeft';
Možda ste također primijetili da nazivi klasa referenciraju objekt stilova. To je zato što ovaj vodič koristi CSS module. CSS moduli vam omogućuju stvaranje lokalno ograničenih stilova u Reactu. Ne morate ništa instalirati ili konfigurirati ako ste koristili create-react-app za pokretanje ovog projekta.
U mapi Components kreirajte novu datoteku pod nazivom sidenav.module.css i dodajte sljedeće:
.sidenav {
širina: 250px;
tranzicija: širina 0.3sease-in-out;
visina: 100vh;
boja pozadine: rgb (10,25,41);
padding-top: 28px;
}.sidenavZatvoreno {
sastavlja: sidenav;
tranzicija: širina 0.3sease-in-out;
širina: 60px
}.sporedna stavka {
zaslon: savitljiv;
align-items: center;
ispuna: 10px 20px;
kursor: pokazivač;
boja: #B2BAC2;
tekst-ukras: nema;
}.linkText {
padding-left: 16px;
}.linkTextClosed {
sastavlja: linkText;
vidljivost: skrivena;
}.sporedna stavka:lebdjeti {
boja pozadine: #244f7d1c;
}
.izbornikBtn {
uskladiti-sebe: centar;
align-self: flex-početak;
justify-self: flex-kraj;
boja: #B2BAC2;
boja pozadine: prozirna;
granica: nema;
kursor: pokazivač;
padding-left: 20px;
}
Postavljanje React usmjerivača
Elementi div koje vraća funkcija karte trebaju biti veze. U Reactu možete kreirati veze i rute pomoću react-router-dom.
U terminalu instalirajte react-router-dom putem npm-a.
npm instalirajte react-router-dom@najnoviji
Ova naredba instalira najnoviju verziju react-router-dom.
U Index.js, omotajte App komponentu s Routerom.
uvoz Reagirati iz 'reagirati';
uvoz ReactDOM iz 'react-dom/client';
uvoz aplikacija iz './Aplikacija';
uvoz {BrowserRouter} iz 'react-router-dom';
konst korijen = ReactDOM.createRoot(dokument.getElementById('root'));
korijen.renderirati(
<Reagirati. StrictMode>
<BrowserRouter>
<Aplikacija />
</BrowserRouter>
</React.StrictMode>
);
Zatim u App.js dodajte svoje rute.
uvoz {
BrowserRouter,
Rute,
Ruta,
} iz "reagirati-usmjerivač-dom";uvoz './App.css';
uvoz Sidenav iz './Components/Sidenav';
uvoz Istražiti iz "./Stranice/Istraži";
uvoz Dom iz "./Stranice/Početna";
uvoz postavke iz "./Stranice/Postavke";
uvoz Statistika iz "./Stranice/Statistika";
funkcijaaplikacija() {
povratak (
<div className="aplikacija">
<Sidenav/>
<glavni>
<Rute>
<Staza rute="/" element={<Dom />}/>
<Staza rute="/explore" element={<Istražite />} />
<Staza rute="/statistics" element={<Statistika />}/>
<Staza rute="/settings" element={<Postavke />} />
</Routes>
</main>
</div>
);
}
izvozzadano aplikacija;
Izmijenite App.css ovim stilovima.
tijelo {
margina: 0;
ispuna: 0;
}.App {
zaslon: savitljiv;
}
glavni {
ispuna: 10px;
}
Svaka ruta vraća drugu stranicu ovisno o URL-u proslijeđenom na rekviziti staze. Napravite novu mapu pod nazivom Stranice i dodajte četiri komponente — stranicu Početna, Istraživanje, Statistika i Postavke. Evo primjera:
izvozzadanofunkcijaDom() {
povratak (
<div>Dom</div>
)
}
Ako posjetite putanju /home, trebali biste vidjeti "Home".
Veze na bočnoj traci trebale bi voditi do odgovarajuće stranice kada ih kliknete. U Sidenav.js, modificirajte funkciju mape tako da koristi komponentu NavLink iz react-router-dom umjesto elementa div.
{navData.map (stavka => {
povratak <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Ne zaboravite uvesti NavLink na vrhu datoteke.
uvoz {NavLink} iz "react-router-dom";
NavLink prima URL stazu za vezu kroz to prop.
Do ove točke navigacijska traka je otvorena. Da biste ga učinili sklopivim, možete promijeniti njegovu širinu promjenom CSS klase kada korisnik klikne gumb sa strelicom. Zatim možete ponovno promijeniti CSS klasu da biste je otvorili.
Da biste postigli ovu funkciju prebacivanja, morate znati kada je bočna traka otvorena i zatvorena.
U tu svrhu upotrijebite kuku useState. Ovaj Reagirajte kuku omogućuje vam dodavanje i praćenje stanja u funkcionalnoj komponenti.
U sideNav.js stvorite kuku za otvoreno stanje.
konst [otvori, otvori] = useState(pravi)
Inicijalizirajte otvoreno stanje na istinito, tako da će bočna traka uvijek biti otvorena kada pokrenete aplikaciju.
Zatim stvorite funkciju koja će mijenjati ovo stanje.
konst prebaciOpen = () => {
setopen(!otvori)
}
Sada možete koristiti otvorenu vrijednost za stvaranje dinamičkih CSS klasa poput ove:
<div className={otvori? styles.sidenav: styles.sidenavClosed}>
<gumb className={styles.menuBtn} onClick={toggleOpen}>
{otvorena? <TipkovnicaDoubleArrowLeftIcon />: <TipkovnicaDoubleArrowRightIcon />}
</button>
{navData.map (stavka =>{
povratak <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={otvori? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Korištena imena CSS klasa bit će određena otvorenim stanjem. Na primjer, ako je open istinito, vanjski element div imat će ime klase sidenav. U suprotnom, klasa će biti sidenavClosed.
To je isto za ikonu, koja se mijenja u ikonu strelice udesno kada zatvorite bočnu traku.
Ne zaboravite ga uvesti.
uvoz TipkovnicaDoubleArrowRightIcon iz '@mui/icons-material/KeyboardDoubleArrowRight';
Komponenta bočne trake sada se može sklopiti.
Uzmite cijeli kod iz ovoga GitHub spremište i pokušajte sami.
Styling React komponente
React olakšava izradu sklopive navigacijske komponente. Možete koristiti neke od alata koje React nudi kao što je react-router-dom za rukovanje usmjeravanjem i zakačke za praćenje kolapsiranog stanja.
Također možete koristiti CSS module za stiliziranje komponenti, iako ne morate. Upotrijebite ih za stvaranje klasa s lokalnim opsegom koje su jedinstvene i koje možete otresti iz datoteka paketa ako nisu u upotrebi.
