Összecsukható navigációs menü létrehozása a React segítségével

Összecsukható navigációs menü létrehozása a React segítségével

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.





MAKEUSEOF A NAP VIDEÓJA

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 create-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'; 

function App() {
return (
<div className="App"></div>
);
}

export default App;

A navigációs komponens létrehozása

A létrehozandó navigációs komponens így fog kinézni:





  A React navigációs menü nem összecsukott nézete

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:

  A React navigációs menü összecsukott nézete

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 leképezési funkció 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 from '@mui/icons-material/Home'; 
import TravelExploreIcon from '@mui/icons-material/TravelExplore';
import BarChartIcon from '@mui/icons-material/BarChart';
import SettingsIcon from '@mui/icons-material/Settings';

export const navData = [
{
id: 0,
icon: <HomeIcon/>,
text: "Home",
link: "/"
},
{
id: 1,
icon: <TravelExploreIcon/>,
text: "Explore",
link: "explore"
},
{
id: 2,
icon: <BarChartIcon/>,
text: "Statistics",
link: "statistics"
},
{
id: 3,
icon: <SettingsIcon/>,
text: "Settings",
link: "settings"
}
]

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 install @mui/material @emotion/react @emotion/styled 
npm install @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ó:

// In Sidenav.js 
import { navData } from "../lib/navData";
export default function Sidenav() {
return (
<div>
</div>
)
}

A hivatkozások létrehozásához módosítsa az összetevő div elemét a következőre:

<div> 
<button className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map(item =>{
return <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>

Ez az összetevő 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 from '@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.

fájl átvitele Windowsról linuxra

Az Összetevők mappában hozzon létre egy új nevű fájlt sidenav.module.css és add hozzá a következőket:

.sidenav { 
width: 250px;
transition: width 0.3s ease-in-out;
height: 100vh;
background-color: rgb(10,25,41);
padding-top: 28px;
}

.sidenavd {
composes: sidenav;
transition: width 0.3s ease-in-out;
width: 60px
}

.sideitem {
display: flex;
align-items: center;
padding: 10px 20px;
cursor: pointer;
color: #B2BAC2;
text-decoration: none;
}

.linkText {
padding-left: 16px;
}

.linkTextd {
composes: linkText;
visibility: hidden;
}

.sideitem:hover {
background-color: #244f7d1c;
}

.menuBtn {
align-self: center;
align-self: flex-start;
justify-self: flex-end;
color: #B2BAC2;
background-color: transparent;
border: none;
cursor: pointer;
padding-left: 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@latest 

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 React from 'react'; 
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

Ezután az App.js fájlban adja hozzá az útvonalakat.

hogyan kell játszani a régi számítógépes játékokat a Windows 10 rendszeren
import { 
BrowserRouter,
Routes,
Route,
} from "react-router-dom";

import './App.css';
import Sidenav from './Components/Sidenav';
import Explore from "./Pages/Explore";
import Home from "./Pages/Home";
import Settings from "./Pages/Settings";
import Statistics from "./Pages/Statistics";

function App() {
return (
<div className="App">
<Sidenav/>
<main>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/explore" element={<Explore />} />
<Route path="/statistics" element={<Statistics />}/>
<Route path="/settings" element={<Settings />} />
</Routes>
</main>
</div>
);
}
export default App;

Módosítsa az App.css fájlt ezekkel a stílusokkal.

body { 
margin: 0;
padding: 0;
}

.App {
display: flex;
}

main {
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 Statisztika és a Beállítások oldalt. Íme egy példa:

export default function Home() { 
return (
<div>Home</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 fájlban 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(item => { 
return <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 } from "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(true) 

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(!open)
}

Mostantól használhatja a nyitott értéket dinamikus CSS-osztályok létrehozására, például:

<div className={open?styles.sidenav:styles.sidenavd}> 
<button className={styles.menuBtn} onClick={toggleOpen}>
{open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map(item =>{
return <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={open?styles.linkText:styles.linkTextd}>{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 sidenavd 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 from '@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 az útválasztás kezeléséhez és a hookok nyomon követéséhez az összecsukott állapotot.

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 lerázhat a kötegfájlokból, ha nincsenek használatban.