Navigační nabídka postranního panelu se obvykle skládá ze svislého seznamu odkazů. V Reactu můžete vytvořit sadu odkazů pomocí React-router-dom.
Chcete-li vytvořit boční navigační nabídku React s odkazy obsahujícími ikony uživatelského rozhraní materiálu, postupujte podle těchto kroků. Odkazy vykreslí různé stránky, když na ně kliknete.
Vytvoření aplikace React
Pokud již máte a Reagovat projekt, klidně přeskočte na další krok.
Pomocí příkazu create-react-app můžete rychle spustit aplikaci React. Nainstaluje za vás všechny závislosti a konfiguraci.
Spusťte následující příkaz a vytvořte projekt React s názvem respond-sidenav.
npx vytvořit-react-app reagovat-sidenav
Tím se vytvoří složka reakce-sidenav s některými soubory, abyste mohli začít. Chcete-li tuto složku trochu vyčistit, přejděte do složky src a nahraďte obsah App.js tímto:
import './App.css';funkceAplikace() {
vrátit se (
<div název_třídy="Aplikace"></div>
);
}
vývoznívýchozí Aplikace;
Vytvoření navigační komponenty
Navigační komponenta, kterou vytvoříte, bude vypadat takto:
Je to docela jednoduché, ale jakmile skončíte, měli byste být schopni upravit jej tak, aby vyhovoval vašim potřebám. Navigační komponentu můžete sbalit pomocí ikony dvojité šipky v horní části:
Začněte vytvořením nesbaleného pohledu. Kromě ikony šipky obsahuje postranní panel seznam položek. Každá z těchto položek má ikonu a nějaký text. Namísto opakovaného vytváření prvku pro každý z nich můžete data pro každou položku uložit do pole a poté je iterovat pomocí funkce mapy.
Pro ukázku vytvořte novou složku s názvem lib a přidejte nový soubor s názvem navData.js.
import HomeIkona z '@mui/icons-material/Home';
import TravelExploreIcon z '@mui/icons-material/TravelExplore';
import BarChartIcon z '@mui/icons-material/BarChart';
import Ikona nastavení z '@mui/icons-material/Settings';
vývozníkonst navData = [
{
id: 0,
ikona: <HomeIcon/>,
text: "Domov",
odkaz: "/"
},
{
id: 1,
ikona: <TravelExploreIcon/>,
text: "Prozkoumat",
odkaz: "prozkoumat"
},
{
id: 2,
ikona: <BarChartIcon/>,
text: "Statistika",
odkaz: "statistika"
},
{
id: 3,
ikona: <SettingsIcon/>,
text: "Nastavení",
odkaz: "nastavení"
}
]
Ikony použité výše jsou z knihovny Material UI, takže ji nejprve nainstalujte pomocí tohoto příkazu:
instalace npm @mui/material @emoce/react @emoce/styled
instalace npm @mui/icons-material
Dále vytvořte složku s názvem Komponenty a přidejte novou komponentu s názvem Sidenav.js.
V tomto souboru importujte navData z ../lib a vytvořte kostru pro Sidenav funkce:
// V Sidenav.js
import { navData } z "../lib/navData";
vývoznívýchozífunkceSidenav() {
vrátit se (
<div>
</div>
)
}
Chcete-li vytvořit odkazy, upravte prvek div v této komponentě na toto:
<div>
<button className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map (položka =>{
vrátit se <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Tato komponenta vytvoří navigační odkaz obsahující ikonu a text odkazu pro každou iteraci ve funkci mapy.
Prvek tlačítka obsahuje ikonu šipky doleva z knihovny uživatelského rozhraní Material. Importujte jej v horní části komponenty pomocí tohoto kódu.
import KeyboardDoubleArrowLeftIcon z '@mui/icons-material/KeyboardDoubleArrowLeft';
Možná jste si také všimli, že názvy tříd odkazují na objekt styles. Je to proto, že tento tutoriál používá moduly CSS. Moduly CSS vám umožňují vytvářet styly s místním rozsahem v Reactu. Pokud jste ke spuštění tohoto projektu použili aplikaci create-react-app, nemusíte nic instalovat ani konfigurovat.
Ve složce Components vytvořte nový soubor s názvem sidenav.module.css a přidejte následující:
.sidenav {
šířka: 250px;
přechod: šířka 00,3 seasy-in-out;
výška: 100vh;
barva pozadí: rgb (10,25,41);
padding-top: 28px;
}.sidenavUzavřeno {
skládá: sidenav;
přechod: šířka 00,3 seasy-in-out;
šířka: 60px
}.vedlejší položka {
displej: flex;
align-items: center;
odsazení: 10px 20px;
kurzor: ukazatel;
barva: #B2BAC2;
text-dekorace: žádná;
}.linkText {
padding-left: 16px;
}.linkTextClosed {
skládá: linkText;
viditelnost: skrytý;
}.vedlejší položka:vznášet se {
barva pozadí: #244f7d1c;
}
.menuBtn {
zarovnat-já: střed;
align-self: flex-Start;
ospravedlnit se: flex-konec;
barva: #B2BAC2;
barva pozadí: průhledná;
hranice: žádná;
kurzor: ukazatel;
padding-left: 20px;
}
Nastavení routeru React
Prvky div vrácené funkcí mapy by měly být odkazy. V Reactu můžete vytvářet odkazy a trasy pomocí React-router-dom.
V terminálu nainstalujte response-router-dom přes npm.
npm install reagovat-router-dom@nejnovější
Tento příkaz nainstaluje nejnovější verzi respond-router-dom.
V Index.js zabalte komponentu App do směrovače.
import Reagovat z 'reagovat';
import ReactDOM z 'react-dom/client';
import Aplikace z './Aplikace';
import { BrowserRouter } z 'react-router-dom';
konst root = ReactDOM.createRoot(dokument.getElementById('root'));
vykořenit.poskytnout(
<Reagovat. StrictMode>
<BrowserRouter>
<Aplikace />
</BrowserRouter>
</React.StrictMode>
);
Dále do App.js přidejte své trasy.
import {
BrowserRouter,
trasy,
Trasa,
} z "reagovat-router-dom";import './App.css';
import Sidenav z './Components/Sidenav';
import Prozkoumat z "./Pages/Explore";
import Domov z "./Pages/Home";
import Nastavení z "./Stránky/Nastavení";
import Statistika z "./Stránky/Statistiky";
funkceAplikace() {
vrátit se (
<div název_třídy="Aplikace">
<Sidenav/>
<hlavní>
<Trasy>
<Cesta cesty ="/" element={<Domov />}/>
<Cesta cesty ="/explore" element={<Prozkoumat />} />
<Cesta cesty ="/statistics" element={<Statistika />}/>
<Cesta cesty ="/settings" element={<Nastavení />} />
</Routes>
</main>
</div>
);
}
vývoznívýchozí Aplikace;
Upravte App.css pomocí těchto stylů.
tělo {
okraj: 0;
výplň: 0;
}.Aplikace {
displej: flex;
}
hlavní {
odsazení: 10px;
}
Každá trasa vrací jinou stránku v závislosti na URL předané do rekvizity cesty. Vytvořte novou složku s názvem Stránky a přidejte čtyři součásti – stránku Domů, Prozkoumat, Statistiky a Nastavení. Zde je příklad:
vývoznívýchozífunkceDomov() {
vrátit se (
<div>Domov</div>
)
}
Pokud navštívíte cestu /home, měli byste vidět "Home".
Odkazy v postranním panelu by po kliknutí měly vést na odpovídající stránku. V Sidenav.js upravte funkci mapy tak, aby místo prvku div používala komponentu NavLink z respond-router-dom.
{navData.map (položka => {
vrátit se <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Nezapomeňte importovat NavLink v horní části souboru.
import { NavLink } z "react-router-dom";
NavLink obdrží URL cestu pro odkaz přes prop.
Do této chvíle je navigační lišta otevřená. Aby byl sbalitelný, můžete přepnout jeho šířku změnou třídy CSS, když uživatel klikne na tlačítko se šipkou. Poté můžete znovu změnit třídu CSS a otevřít ji.
Chcete-li dosáhnout této funkce přepínání, musíte vědět, kdy je postranní panel otevřený a zavřený.
K tomu použijte háček useState. Tento Reagovat háček umožňuje přidat a sledovat stav ve funkční komponentě.
V sideNav.js vytvořte hák pro otevřený stav.
konst [open, setopen] = useState(skutečný)
Inicializujte stav otevření na hodnotu true, takže postranní panel bude při spuštění aplikace vždy otevřený.
Dále vytvořte funkci, která bude tento stav přepínat.
konst toggleOpen = () => {
setopen(!open)
}
Nyní můžete použít hodnotu open k vytvoření dynamických tříd CSS, jako je tato:
<div className={open? styles.sidenav: styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{OTEVŘENO? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map (položka =>{
vrátit se <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={otevřít? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Použité názvy tříd CSS budou určeny stavem otevření. Pokud je například open true, vnější prvek div bude mít název třídy sidenav. Jinak bude třída sidenavClosed.
Totéž platí pro ikonu, která se po zavření bočního panelu změní na ikonu šipky vpravo.
Nezapomeňte jej importovat.
import KeyboardDoubleArrowRightIcon z '@mui/icons-material/KeyboardDoubleArrowRight';
Komponenta postranního panelu je nyní skládací.
Získejte kompletní kód z tohoto úložiště GitHub a zkuste to sami.
Styling React Components
React usnadňuje vytvoření skládací navigační komponenty. Můžete použít některé z nástrojů, které React poskytuje, jako je response-router-dom ke zpracování směrování a háčků ke sledování sbaleného stavu.
Ke stylování komponent můžete také použít moduly CSS, i když nemusíte. Použijte je k vytvoření tříd s místním rozsahem, které jsou jedinečné a které můžete setřást ze souborů svazku, pokud se nepoužívají.