Az oldalsáv navigációs menüje általában a hivatkozások függőleges listájából áll. A React-ban a react-router-dom használatával létrehozhat egy hivatkozáskészletet.
Kövesse ezeket a lépéseket egy React oldalsó navigációs menü létrehozásához, amely hivatkozásokat tartalmaz lényeges UI ikonokat. A hivatkozások különböző oldalakat jelenítenek meg, amikor rájuk kattint.
React alkalmazás létrehozása
Ha már van a Reagálás projekt, nyugodtan ugorjon a következő lépésre.
A create-react-app paranccsal gyorsan elindíthatja és futtathatja a Reactet. Telepíti az összes függőséget és konfigurációt az Ön számára.
Futtassa a következő parancsot a react-sidenav nevű React projekt létrehozásához.
npx teremt-react-app react-sidenav
Ezzel létrehoz egy react-sidenav mappát néhány fájllal a kezdéshez. A mappa egy kicsit megtisztításához navigáljon az src mappába, és cserélje le az App.js tartalmát a következőre:
import './App.css';funkcióApp() {
Visszatérés (
<div className="App"></div>
);
}
exportalapértelmezett App;
A navigációs komponens létrehozása
A létrehozandó navigációs komponens így fog kinézni:
Elég egyszerű, de ha elkészült, képesnek kell lennie arra, hogy az igényeinek megfelelően módosítsa. A navigációs összetevőt összecsukhatja a felül található dupla nyíl ikon segítségével:
Kezdje a nem összecsukott nézet létrehozásával. A nyíl ikonon kívül az oldalsáv az elemek listáját tartalmazza. Mindegyik elemhez tartozik egy ikon és néhány szöveg. Ahelyett, hogy ismétlődően hozna létre egy-egy elemet mindegyikhez, tárolhatja az egyes elemek adatait egy tömbben, majd egy térképfüggvény segítségével iterálhatja azokat.
A bemutatáshoz hozzon létre egy új mappát lib néven, és adjon hozzá egy új fájlt, a neve navData.js.
import HomeIcon tól től '@mui/icons-material/Home';
import TravelExploreIcon tól től '@mui/icons-material/TravelExplore';
import BarChartIcon tól től '@mui/icons-material/BarChart';
import Beállítások ikon tól től '@mui/icons-material/Settings';
exportconst navData = [
{
azonosító: 0,
ikon: <HomeIcon/>,
szöveg: "itthon",
link: "/"
},
{
azonosító: 1,
ikon: <TravelExploreIcon/>,
szöveg: "Fedezd fel",
link: "Fedezd fel"
},
{
azonosító: 2,
ikon: <BarChartIcon/>,
szöveg: "Statisztika",
link: "statisztika"
},
{
azonosító: 3,
ikon: <BeállításokIcon/>,
szöveg: "Beállítások",
link: "beállítások"
}
]
A fent használt ikonok a Material UI könyvtárból származnak, ezért először telepítse a következő paranccsal:
npm telepítés @mui/material @érzelem/react @érzelem/styled
npm telepítés @mui/icons-material
Ezután hozzon létre egy mappát, melynek neve Alkatrészek és adjunk hozzá egy új komponenst Sidenav.js.
Ebben a fájlban importálja a navData fájlt a ../lib fájlból, és hozza létre a vázat Sidenav funkció:
// A Sidenav.js-ben
import { navData } tól től "../lib/navData";
exportalapértelmezettfunkcióSidenav() {
Visszatérés (
<div>
</div>
)
}
A hivatkozások létrehozásához módosítsa az összetevő div elemét a következőre:
<div>
<gomb className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map (elem =>{
Visszatérés <div kulcs={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Ez a komponens létrehoz egy navigációs hivatkozást, amely tartalmazza az ikont és a hivatkozás szövegét a térképfunkció minden iterációjához.
A gombelem a Material UI könyvtár bal nyíl ikonját tartja. Ezzel a kóddal importálja az összetevő tetejére.
import KeyboardDoubleArrowLeftIcon tól től '@mui/icons-material/KeyboardDoubleArrowLeft';
Azt is észrevehette, hogy az osztálynevek egy stílusobjektumra hivatkoznak. Ennek az az oka, hogy ez az oktatóanyag CSS-modulokat használ. A CSS-modulok lehetővé teszik helyi hatókörű stílusok létrehozását a Reactban. Semmit sem kell telepítenie vagy konfigurálnia, ha a create-react-app parancsot használta a projekt elindításához.
Az Összetevők mappában hozzon létre egy új nevű fájlt sidenav.module.css és add hozzá a következőket:
.sidenav {
szélesség: 250 képpont;
átmenet: szélesség 0.3skönnyedség be-ki;
magasság: 100vh;
háttérszín: rgb (10,25,41);
párnázott felső: 28px;
}.sidenavClosed {
komponálja: sidenav;
átmenet: szélesség 0.3skönnyedség be-ki;
szélesség: 60 képpont
}.sideitem {
kijelző: flex;
align-ites: center;
padding: 10px 20px;
kurzor: pointer;
szín: #B2BAC2;
szöveg-dekoráció: nincs;
}.linkText {
padding-bal: 16px;
}.linkTextClosed {
összeállítja: linkText;
láthatóság: rejtett;
}.sideitem:lebeg {
háttérszín: #244f7d1c;
}
.menuBtn {
igazítsa-maga: középen;
igazítás: flex-Rajt;
igazolja magát: flex-vége;
szín: #B2BAC2;
háttérszín: átlátszó;
határ: nincs;
kurzor: pointer;
padding-bal: 20px;
}
A React Router beállítása
A map függvény által visszaadott div elemeknek linkeknek kell lenniük. A React alkalmazásban linkeket és útvonalakat hozhat létre a react-router-dom használatával.
A terminálban telepítse a react-router-dom parancsot az npm-en keresztül.
npm install react-router-dom@legújabb
Ez a parancs telepíti a react-router-dom legújabb verzióját.
Az Index.js fájlban csomagolja be az App komponenst a Routerrel.
import Reagál tól től 'reagál';
import ReactDOM tól től 'react-dom/kliens';
import App tól től './App';
import { BrowserRouter } tól től 'react-router-dom';
const root = ReactDOM.createRoot(dokumentum.getElementById('root'));
gyökér.Vakol(
<Reagál. StrictMode>
<BrowserRouter>
<Alkalmazás />
</BrowserRouter>
</React.StrictMode>
);
Ezután az App.js fájlban adja hozzá az útvonalakat.
import {
BrowserRouter,
Útvonalak,
Útvonal,
} tól től "react-router-dom";import './App.css';
import Sidenav tól től './Components/Sidenav';
import Fedezd fel tól től "./Pages/Explore";
import itthon tól től "./Pages/Home";
import Beállítások tól től "./Pages/Settings";
import Statisztika tól től "./Pages/Statisztika";
funkcióApp() {
Visszatérés (
<div className="App">
<Sidenav/>
<fő->
<Útvonalak>
<Útvonal útvonala="/" elem={<Itthon />}/>
<Útvonal útvonala="/explore" elem={<Fedezd fel />} />
<Útvonal útvonala="/statistics" elem={<Statisztika />}/>
<Útvonal útvonala="/settings" elem={<Beállítások />} />
</Routes>
</main>
</div>
);
}
exportalapértelmezett App;
Módosítsa az App.css fájlt ezekkel a stílusokkal.
body {
margó: 0;
párnázás: 0;
}.App {
kijelző: flex;
}
fő {
padding: 10px;
}
Az egyes útvonalak más oldalt adnak vissza, attól függően, hogy milyen URL-t kaptak út kellékei. Hozzon létre egy új mappát Oldalak néven, és adjon hozzá négy összetevőt – a Kezdőlap, a Felfedezés, a Statisztikák és a Beállítások oldalt. Íme egy példa:
exportalapértelmezettfunkcióitthon() {
Visszatérés (
<div>itthon</div>
)
}
Ha meglátogatja a /home útvonalat, látnia kell a "Home"-t.
Az oldalsávban lévő hivatkozásoknak a megfelelő oldalra kell vezetniük, amikor rájuk kattint. A Sidenav.js programban módosítsa a térképfüggvényt úgy, hogy a div elem helyett a react-router-dom NavLink összetevőjét használja.
{navData.map (elem => {
Visszatérés <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Ne felejtse el importálni a NavLink fájlt a fájl tetején.
import { NavLink } tól től "react-router-dom";
A NavLink megkapja a link URL elérési útját a to propon keresztül.
Eddig a pontig a navigációs sáv nyitva van. Az összecsukhatóvá tétel érdekében átkapcsolhatja a szélességét a CSS-osztály módosításával, amikor a felhasználó a nyílgombra kattint. Ezután újra módosíthatja a CSS-osztályt a megnyitáshoz.
Ennek a kapcsolófunkciónak az eléréséhez tudnia kell, hogy az oldalsáv mikor van nyitva és zárva.
Ehhez használja a useState hook-ot. Ez Reagálás horog lehetővé teszi az állapot hozzáadását és nyomon követését egy funkcionális komponensben.
A sideNav.js fájlban hozza létre a hookot a nyitott állapothoz.
const [open, setopen] = useState(igaz)
Inicializálja a nyitott állapotot igazra, így az oldalsáv mindig nyitva lesz az alkalmazás indításakor.
Ezután hozza létre azt a függvényt, amely átkapcsolja ezt az állapotot.
const toggleOpen = () => {
setopen(!nyitva)
}
Mostantól használhatja a nyitott értéket dinamikus CSS-osztályok létrehozására, például:
<div className={megnyílik? styles.sidenav: styles.sidenavClosed}>
<gomb className={styles.menuBtn} onClick={toggleOpen}>
{nyisd ki? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map (elem =>{
Visszatérés <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={nyitva? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
A használt CSS-osztályneveket a nyitott állapot határozza meg. Például, ha az open érték igaz, akkor a külső div elemnek sidenav osztályneve lesz. Ellenkező esetben az osztály sidenavClosed lesz.
Ugyanez vonatkozik az ikonra is, amely az oldalsáv bezárásakor jobbra nyíl ikonra változik.
Ne felejtse el importálni.
import KeyboardDoubleArrowRightIcon tól től '@mui/icons-material/KeyboardDoubleArrowRight';
Az oldalsáv komponense most összecsukható.
Fogja meg a teljes kódot ebből GitHub adattár és próbáld ki magad.
Styling React Components
A React egyszerűvé teszi az összecsukható navigációs komponens felépítését. Használhat néhány olyan eszközt, amelyet a React biztosít, mint például a react-router-dom, hogy kezelje az útválasztást és a hook-okat az összecsukott állapot nyomon követésére.
CSS-modulokat is használhat az összetevők stílusozásához, bár nem muszáj. Használja őket olyan helyi hatókörű osztályok létrehozására, amelyek egyediek, és amelyeket kirázhat a kötegfájlokból, ha nincsenek használatban.