Navigačná ponuka bočného panela zvyčajne pozostáva zo zvislého zoznamu odkazov. Môžete vytvoriť sadu odkazov v React pomocou reakcie-router-dom.
Ak chcete vytvoriť bočnú navigačnú ponuku React s odkazmi obsahujúcimi ikony používateľského rozhrania materiálov, postupujte podľa týchto krokov. Odkazy vykreslia rôzne stránky, keď na ne kliknete.
Vytvorenie aplikácie React
Ak už máte a Reagovať projekt, pokojne preskočte na ďalší krok.
Pomocou príkazu create-react-app môžete rýchlo spustiť aplikáciu React. Nainštaluje za vás všetky závislosti a konfiguráciu.
Spustite nasledujúci príkaz na vytvorenie projektu React s názvom React-sidenav.
npx vytvoriť-react-app response-sidenav
Tým sa vytvorí priečinok reakčnej bočnej navigácie s niekoľkými súbormi, aby ste mohli začať. Ak chcete tento priečinok trochu vyčistiť, prejdite do priečinka src a nahraďte obsah súboru App.js týmto:
importovať './App.css';funkciuApp() {
vrátiť (
<div názov triedy="App"></div>
);
}
exportpredvolená App;
Vytvorenie navigačného komponentu
Navigačný komponent, ktorý vytvoríte, bude vyzerať takto:
Je to celkom jednoduché, ale keď skončíte, mali by ste byť schopní upraviť ho tak, aby vyhovoval vašim potrebám. Navigačný komponent môžete zbaliť pomocou ikony dvojitej šípky v hornej časti:
Začnite vytvorením nezbaleného zobrazenia. Bočný panel obsahuje okrem ikony šípky aj zoznam položiek. Každá z týchto položiek má ikonu a nejaký text. Namiesto opakovaného vytvárania prvku pre každý prvok môžete údaje pre každú položku uložiť do poľa a potom cez ňu iterovať pomocou funkcie mapy.
Na ukážku vytvorte nový priečinok s názvom lib a pridajte nový súbor s názvom navData.js.
importovať HomeIcon od '@mui/icons-material/Home';
importovať TravelExploreIcon od '@mui/icons-material/TravelExplore';
importovať BarChartIcon od '@mui/icons-material/BarChart';
importovať Ikona nastavení od '@mui/icons-material/Settings';
exportkonšt navData = [
{
id: 0,
ikona: <HomeIcon/>,
text: "Domov",
odkaz: "/"
},
{
id: 1,
ikona: <TravelExploreIcon/>,
text: "Preskúmajte",
odkaz: "preskúmať"
},
{
id: 2,
ikona: <BarChartIcon/>,
text: "Štatistiky",
odkaz: "štatistiky"
},
{
id: 3,
ikona: <SettingsIcon/>,
text: "nastavenie",
odkaz: "nastavenie"
}
]
Ikony použité vyššie sú z knižnice Material UI, takže si ju najskôr nainštalujte pomocou tohto príkazu:
inštalácia npm @mui/material @emócia/react @emócia/styled
inštalácia npm @mui/icons-material
Ďalej vytvorte priečinok s názvom Komponenty a pridajte nový komponent s názvom Sidenav.js.
V tomto súbore importujte navData z ../lib a vytvorte kostru pre Sidenav funkcia:
// V Sidenav.js
importovať { navData } od "../lib/navData";
exportpredvolenáfunkciuSidenav() {
vrátiť (
<div>
</div>
)
}
Ak chcete vytvoriť prepojenia, upravte prvok div v tomto komponente na tento:
<div>
<button className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map (položka =>{
vrátiť <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Tento komponent vytvorí navigačné prepojenie obsahujúce ikonu a text prepojenia pre každú iteráciu vo funkcii mapy.
Prvok tlačidla obsahuje ikonu šípky doľava z knižnice používateľského rozhrania Material. Importujte ho v hornej časti komponentu pomocou tohto kódu.
importovať KeyboardDoubleArrowLeftIcon od '@mui/icons-material/KeyboardDoubleArrowLeft';
Možno ste si tiež všimli, že názvy tried odkazujú na objekt štýlov. Je to preto, že tento tutoriál používa moduly CSS. Moduly CSS vám umožňujú vytvárať v Reacte štýly s lokálnym rozsahom. Ak ste na spustenie tohto projektu použili aplikáciu create-react-app, nemusíte nič inštalovať ani konfigurovať.
V priečinku Components vytvorte nový súbor s názvom sidenav.module.css a pridajte nasledujúce:
.sidenav {
šírka: 250px;
prechod: šírka 00,3 seasy-in-out;
výška: 100vh;
farba pozadia: rgb (10,25,41);
padding-top: 28px;
}.sidenavZatvorené {
skladá: sidenav;
prechod: šírka 00,3 seasy-in-out;
šírka: 60px
}.vedľajšia položka {
displej: flex;
align-items: center;
výplň: 10px 20px;
kurzor: ukazovateľ;
farba: #B2BAC2;
text-dekorácia: žiadna;
}.linkText {
padding-left: 16px;
}.linkTextClosed {
skladá: linkText;
viditeľnosť: skryté;
}.vedľajšia položka:vznášať sa {
farba pozadia: #244f7d1c;
}
.menuBtn {
zarovnať-seba: stred;
align-self: flex-začať;
ospravedlniť sa: flex-koniec;
farba: #B2BAC2;
farba pozadia: transparentná;
hranica: žiadna;
kurzor: ukazovateľ;
padding-left: 20px;
}
Nastavenie smerovača React
Prvky div vrátené funkciou mapy by mali byť odkazy. V React môžete vytvárať prepojenia a trasy pomocou React-router-dom.
V termináli nainštalujte response-router-dom cez npm.
npm install reagovat-router-dom@najnovšie
Tento príkaz nainštaluje najnovšiu verziu Reag-router-dom.
V Index.js zabaľte komponent App do smerovača.
importovať Reagovať od 'reagovať';
importovať ReactDOM od 'react-dom/client';
importovať App od './App';
importovať { BrowserRouter } od 'react-router-dom';
konšt root = ReactDOM.createRoot(dokument.getElementById('root'));
koreň.vykresliť(
<Reagovať. StrictMode>
<BrowserRouter>
<Aplikácia />
</BrowserRouter>
</React.StrictMode>
);
Potom v App.js pridajte svoje trasy.
importovať {
BrowserRouter,
trasy,
trasa,
} od "reagovať-smerovač-dom";importovať './App.css';
importovať Sidenav od './Components/Sidenav';
importovať Preskúmajte od "./Pages/Explore";
importovať Domov od "./Pages/Home";
importovať nastavenie od "./Stránky/Nastavenia";
importovať Štatistiky od "./Stránky/štatistika";
funkciuApp() {
vrátiť (
<div názov triedy="App">
<Sidenav/>
<hlavné>
<Trasy>
<Cesta trasy ="/" element={<Domov />}/>
<Cesta trasy ="/explore" element={<Preskúmať />} />
<Cesta trasy ="/statistics" element={<štatistiky />}/>
<Cesta trasy ="/settings" element={<Nastavenie />} />
</Routes>
</main>
</div>
);
}
exportpredvolená App;
Upravte App.css pomocou týchto štýlov.
telo {
okraj: 0;
výplň: 0;
}.App {
displej: flex;
}
hlavné {
výplň: 10px;
}
Každá trasa vráti inú stránku v závislosti od adresy URL odovzdanej do cestné rekvizity. Vytvorte nový priečinok s názvom Stránky a pridajte štyri komponenty – stránku Domov, Preskúmať, Štatistiky a Nastavenia. Tu je príklad:
exportpredvolenáfunkciuDomov() {
vrátiť (
<div>Domov</div>
)
}
Ak navštívite cestu /home, mali by ste vidieť "Domov".
Odkazy na bočnom paneli by mali po kliknutí viesť na zodpovedajúcu stránku. V Sidenav.js upravte funkciu mapy tak, aby namiesto prvku div používala komponent NavLink z response-router-dom.
{navData.map (položka => {
vrátiť <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Nezabudnite importovať NavLink v hornej časti súboru.
importovať { NavLink } od "react-router-dom";
NavLink dostane URL cestu pre odkaz cez prop.
Až do tohto bodu je navigačná lišta otvorená. Aby sa dal zbaliť, môžete zmeniť jeho šírku zmenou triedy CSS, keď používateľ klikne na tlačidlo so šípkou. Potom môžete znova zmeniť triedu CSS a otvoriť ju.
Na dosiahnutie tejto funkcie prepínania potrebujete vedieť, kedy je bočný panel otvorený a zatvorený.
Na tento účel použite háčik useState. Toto Reagovať hák umožňuje pridávať a sledovať stav vo funkčnom komponente.
V sideNav.js vytvorte hák pre otvorený stav.
konšt [open, setopen] = useState(pravda)
Inicializujte stav otvorenia na hodnotu true, takže bočný panel bude vždy otvorený pri spustení aplikácie.
Ďalej vytvorte funkciu, ktorá bude tento stav prepínať.
konšt toggleOpen = () => {
setopen(!open)
}
Teraz môžete použiť otvorenú hodnotu na vytváranie dynamických tried CSS, ako je táto:
<div className={open? styles.sidenav: styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{OTVORENÉ? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map (položka =>{
vrátiť <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={otvoriť? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Použité názvy tried CSS budú určené podľa stavu otvorenia. Napríklad, ak je open true, vonkajší prvok div bude mať názov triedy sidenav. V opačnom prípade bude trieda sidenavClosed.
To isté platí pre ikonu, ktorá sa po zatvorení bočného panela zmení na ikonu šípky doprava.
Nezabudnite ho importovať.
importovať KeyboardDoubleArrowRightIcon od '@mui/icons-material/KeyboardDoubleArrowRight';
Komponent bočného panela je teraz zložiteľný.
Z tohto získajte úplný kód úložisko GitHub a skúste to sami.
Styling React Components
React zjednodušuje vytvorenie skladacieho navigačného komponentu. Môžete použiť niektoré z nástrojov, ktoré React poskytuje, ako napríklad response-router-dom na spracovanie smerovania a hákov na sledovanie zbaleného stavu.
Na štýlovanie komponentov môžete použiť aj moduly CSS, aj keď nemusíte. Použite ich na vytvorenie tried s lokálnym rozsahom, ktoré sú jedinečné a ktoré môžete vytriasť zo súborov balíka, ak sa nepoužívajú.