Navigacijski meni v stranski vrstici je običajno sestavljen iz navpičnega seznama povezav. V Reactu lahko ustvarite niz povezav z uporabo react-router-dom.
Sledite tem korakom, da ustvarite stranski navigacijski meni React s povezavami, ki vsebujejo materialne ikone uporabniškega vmesnika. Povezave bodo prikazale različne strani, ko jih kliknete.
Ustvarjanje aplikacije React
Če že imate a Projekt React, lahko preskočite na naslednji korak.
Z ukazom create-react-app lahko hitro začnete uporabljati React. Za vas namesti vse odvisnosti in konfiguracijo.
Zaženite naslednji ukaz, da ustvarite projekt React z imenom react-sidenav.
npx ustvariti-react-aplikacija react-sidenav
To bo ustvarilo mapo react-sidenav z nekaj datotekami za lažji začetek. Če želite to mapo nekoliko počistiti, se pomaknite do mape src in zamenjajte vsebino App.js s tem:
uvoz './App.css';funkcijoaplikacija() {
vrnitev (
<div className="aplikacija"></div>
);
}
izvozprivzeto aplikacija;
Ustvarjanje navigacijske komponente
Navigacijska komponenta, ki jo boste ustvarili, bo videti takole:
Je precej preprosto, a ko končate, bi ga morali spremeniti, da bo ustrezalo vašim potrebam. Navigacijsko komponento lahko strnete z ikono dvojne puščice na vrhu:
Začnite z ustvarjanjem nestrnjenega pogleda. Stranska vrstica poleg ikone puščice vsebuje seznam elementov. Vsak od teh elementov ima ikono in nekaj besedila. Namesto ponavljajočega se ustvarjanja elementa za vsakega, lahko podatke za vsak element shranite v matriko in nato ponavljate po njem s funkcijo zemljevida.
Za predstavitev ustvarite novo mapo z imenom lib in dodajte novo datoteko z imenom navData.js.
uvoz HomeIcon od '@mui/icons-material/Domov';
uvoz TravelExploreIcon od '@mui/icons-material/TravelExplore';
uvoz BarChartIcon od '@mui/icons-material/BarChart';
uvoz Ikona nastavitev od '@mui/icons-material/Nastavitve';
izvozkonst navData = [
{
id: 0,
ikona: <HomeIcon/>,
besedilo: "domov",
povezava: "/"
},
{
id: 1,
ikona: <TravelExploreIcon/>,
besedilo: "Raziščite",
povezava: "raziskati"
},
{
ID: 2,
ikona: <BarChartIcon/>,
besedilo: "Statistika",
povezava: "statistika"
},
{
ID: 3,
ikona: <SettingsIcon/>,
besedilo: "nastavitve",
povezava: "nastavitve"
}
]
Zgoraj uporabljene ikone so iz knjižnice Material UI, zato jo najprej namestite s tem ukazom:
namestitev npm @mui/material @čustvo/react @čustvo/styled
namestitev npm @mui/icons-material
Nato ustvarite mapo z imenom Komponente in dodajte novo komponento, imenovano Sidenav.js.
V to datoteko uvozite navData iz ../lib in ustvarite okostje za Sidenav funkcija:
// V Sidenav.js
uvoz {navData} od "../lib/navData";
izvozprivzetofunkcijoSidenav() {
vrnitev (
<div>
</div>
)
}
Če želite ustvariti povezave, spremenite element div v tej komponenti v to:
<div>
<gumb className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map (item =>{
vrnitev <div ključ={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Ta komponenta ustvari navigacijsko povezavo, ki vsebuje ikono in besedilo povezave za vsako ponovitev v funkciji zemljevida.
Element gumba vsebuje ikono puščice levo iz knjižnice materialnega uporabniškega vmesnika. Uvozite ga na vrh komponente s to kodo.
uvoz KeyboardDoubleArrowLeftIcon od '@mui/icons-material/KeyboardDoubleArrowLeft';
Morda ste tudi opazili, da se imena razredov sklicujejo na objekt slogov. To je zato, ker ta vadnica uporablja module CSS. Moduli CSS vam omogočajo ustvarjanje slogov z lokalnim obsegom v Reactu. Če ste za začetek tega projekta uporabili aplikacijo create-react-app, vam ni treba ničesar namestiti ali konfigurirati.
V mapi Komponente ustvarite novo datoteko z imenom sidenav.module.css in dodajte naslednje:
.sidenav {
širina: 250px;
prehod: premer 0.3sease-in-out;
višina: 100vh;
barva ozadja: rgb (10,25,41);
oblazinjenje: 28px;
}.sidenavZaprto {
sestavlja: stranav;
prehod: premer 0.3sease-in-out;
širina: 60px
}.sideitem {
zaslon: flex;
align-items: center;
oblazinjenje: 10px 20px;
kazalec: kazalec;
barva: #B2BAC2;
tekst-dekoracija: brez;
}.linkText {
oblazinjenje-levo: 16px;
}.linkTextClosed {
sestavlja: linkText;
vidnost: skrita;
}.sideitem:lebdi {
Barva ozadja: #244f7d1c;
}
.menuBtn {
poravnati-sebe: center;
align-self: flex-začetek;
justify-self: flex-konec;
barva: #B2BAC2;
barva ozadja: prozorna;
meja: brez;
kazalec: kazalec;
oblazinjenje-levo: 20px;
}
Nastavitev usmerjevalnika React
Elementi div, ki jih vrne funkcija zemljevida, morajo biti povezave. V Reactu lahko ustvarite povezave in poti z uporabo react-router-dom.
V terminalu namestite react-router-dom prek npm.
npm namestite reakcijski usmerjevalnik-dom@najnovejše
Ta ukaz namesti najnovejšo različico react-router-dom.
V Index.js ovijte komponento aplikacije z usmerjevalnikom.
uvoz Reagiraj od 'reagirati';
uvoz ReactDOM od 'react-dom/client';
uvoz aplikacija od './Aplikacija';
uvoz {BrowserRouter} od 'react-router-dom';
konst root = ReactDOM.createRoot(dokument.getElementById('root'));
korenina.render(
<Reagiraj. StrictMode>
<BrowserRouter>
<Aplikacija />
</BrowserRouter>
</React.StrictMode>
);
Nato v App.js dodajte svoje poti.
uvoz {
BrowserRouter,
Poti,
pot,
} od "reagirati-usmerjevalnik-dom";uvoz './App.css';
uvoz Sidenav od './Components/Sidenav';
uvoz Raziščite od "./Pages/Explore";
uvoz domov od "./Strani/Domov";
uvoz nastavitve od "./Strani/Nastavitve";
uvoz Statistika od "./Pages/Statistics";
funkcijoaplikacija() {
vrnitev (
<div className="aplikacija">
<stranski pregled/>
<glavni>
<Poti>
<Pot poti="/" element={<Domov />}/>
<Pot poti="/explore" element={<Raziščite />} />
<Pot poti="/statistics" element={<Statistika />}/>
<Pot poti="/settings" element={<Nastavitve />} />
</Routes>
</main>
</div>
);
}
izvozprivzeto aplikacija;
Spremenite App.css s temi slogi.
telo {
rob: 0;
oblazinjenje: 0;
}.App {
zaslon: flex;
}
glavni {
oblazinjenje: 10px;
}
Vsaka pot vrne drugo stran, odvisno od URL-ja, posredovanega v rekviziti poti. Ustvarite novo mapo z imenom Strani in dodajte štiri komponente – stran Domov, Raziskovanje, Statistika in Nastavitve. Tukaj je primer:
izvozprivzetofunkcijodomov() {
vrnitev (
<div>domov</div>
)
}
Če obiščete pot /home, bi morali videti »Domov«.
Povezave v stranski vrstici bi morale voditi do ustrezne strani, ko jih kliknete. V Sidenav.js spremenite funkcijo zemljevida tako, da namesto elementa div uporablja komponento NavLink iz react-router-dom.
{navData.map (item => {
vrnitev <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Ne pozabite uvoziti NavLink na vrh datoteke.
uvoz {NavLink} od "react-router-dom";
NavLink prejme pot URL za povezavo prek prop.
Do te točke je navigacijska vrstica odprta. Če ga želite zložiti, lahko spremenite njegovo širino tako, da spremenite razred CSS, ko uporabnik klikne gumb s puščico. Nato lahko znova spremenite razred CSS, da ga odprete.
Če želite doseči to preklopno funkcijo, morate vedeti, kdaj je stranska vrstica odprta in kdaj zaprta.
Za to uporabite kljuko useState. to React hook omogoča dodajanje in spremljanje stanja v funkcionalni komponenti.
V sideNav.js ustvarite kavelj za odprto stanje.
konst [odpri, setopen] = useState(prav)
Inicializirajte odprto stanje na true, tako da bo stranska vrstica vedno odprta, ko zaženete aplikacijo.
Nato ustvarite funkcijo, ki bo preklopila to stanje.
konst preklopiOdpri = () => {
setopen(!odprto)
}
Zdaj lahko uporabite odprto vrednost za ustvarjanje dinamičnih razredov CSS, kot je ta:
<div className={odprto? styles.sidenav: styles.sidenavClosed}>
<gumb className={styles.menuBtn} onClick={toggleOpen}>
{odprto? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map (item =>{
vrnitev <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={odprto? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Uporabljena imena razredov CSS bodo določena z odprtim stanjem. Na primer, če je open nastavljeno na true, bo imel zunanji element div ime razreda sidenav. V nasprotnem primeru bo razred sidenavClosed.
To velja za ikono, ki se spremeni v ikono puščice desno, ko zaprete stransko vrstico.
Ne pozabite ga uvoziti.
uvoz KeyboardDoubleArrowRightIcon od '@mui/icons-material/KeyboardDoubleArrowRight';
Komponenta stranske vrstice je zdaj zložljiva.
Zgrabi celotno kodo iz tega Repozitorij GitHub in poskusite sami.
Styling React komponente
React omogoča preprosto izdelavo zložljive navigacijske komponente. Uporabite lahko nekaj orodij, ki jih nudi React, kot je react-router-dom, za upravljanje z usmerjanjem in kavlji za spremljanje strnjenega stanja.
Module CSS lahko uporabite tudi za oblikovanje komponent, čeprav vam ni treba. Uporabite jih za ustvarjanje razredov z lokalnim obsegom, ki so edinstveni in jih lahko stresete iz datotek svežnja, če niso v uporabi.
