Cum se creează un meniu de navigare pliabil folosind React

Cum se creează un meniu de navigare pliabil folosind React

Un meniu de navigare din bara laterală constă de obicei dintr-o listă verticală de link-uri. Puteți crea un set de legături în React folosind react-router-dom.





Urmați acești pași pentru a crea un meniu de navigare lateral React cu link-uri care conțin pictograme materiale UI. Linkurile vor reda pagini diferite când faceți clic pe ele.





Crearea unei aplicații React

Dacă aveți deja un Proiectul React , nu ezitați să treceți la pasul următor.





REALIZAREA VIDEOCLIPULUI ZILEI

Puteți utiliza comanda create-react-app pentru a începe rapid cu React. Instalează toate dependențele și configurația pentru tine.

Rulați următoarea comandă pentru a crea un proiect React numit react-sidenav.



comanda Amazon livrată, dar neprimită
npx create-react-app react-sidenav 

Acest lucru va crea un folder react-sidenav cu câteva fișiere pentru a începe. Pentru a curăța puțin acest folder, navigați la folderul src și înlocuiți conținutul App.js cu acesta:

import './App.css'; 

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

export default App;

Crearea componentei de navigare

Componenta de navigare pe care o veți crea va arăta astfel:





  Vizualizare fără restrângere a meniului de navigare React

Este destul de simplu, dar odată ce ați terminat, ar trebui să îl puteți modifica pentru a se potrivi nevoilor dvs. Puteți restrânge componenta de navigare folosind pictograma săgeată dublă din partea de sus:

  Vizualizare restrânsă a meniului de navigare React

Începeți prin a crea vizualizarea nerestrânsă. În afară de pictograma săgeată, bara laterală conține o listă de articole. Fiecare dintre aceste elemente are o pictogramă și un text. În loc să creați în mod repetat un element pentru fiecare, puteți stoca datele pentru fiecare articol într-o matrice și apoi puteți repeta peste el folosind o funcție de hartă.





Pentru a demonstra, creați un folder nou numit lib și adăugați un fișier nou numit 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"
}
]

Pictogramele folosite mai sus sunt din biblioteca Material UI, așa că instalați-o mai întâi folosind această comandă:

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material

Apoi, creați un folder numit Componente și adăugați o nouă componentă numită Sidenav.js .

În acest fișier, importați navData din ../lib și creați scheletul pentru Sidenav funcţie:

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

Pentru a crea legăturile, modificați elementul div din această componentă astfel:

464D2C5E256A2FBCCAAE727DA6DA810AFA9F7EB3

Această componentă creează un link de navigare care conține pictograma și textul linkului pentru fiecare iterație din funcția de hartă.

Elementul buton deține pictograma săgeată la stânga din biblioteca Material UI. Importați-l în partea de sus a componentei folosind acest cod.

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; 

S-ar putea să fi observat, de asemenea, că numele claselor fac referire la un obiect de stiluri. Acest lucru se datorează faptului că acest tutorial folosește module CSS. Modulele CSS vă permit să creați stiluri locale în React . Nu trebuie să instalați sau să configurați nimic dacă ați folosit create-react-app pentru a începe acest proiect.

În folderul Componente, creați un fișier nou numit sidenav.module.css și adăugați următoarele:

.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;
}

Configurarea routerului React

Elementele div returnate de funcția hartă ar trebui să fie legături. În React, puteți crea legături și rute folosind react-router-dom.

În terminal, instalați react-router-dom prin npm.

npm install react-router-dom@latest 

Această comandă instalează cea mai recentă versiune de react-router-dom.

În Index.js, împachetați componenta App cu routerul.

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>
);

Apoi, în App.js, adăugați rutele.

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;

Modificați App.css cu aceste stiluri.

body { 
margin: 0;
padding: 0;
}

.App {
display: flex;
}

main {
padding: 10px;
}

Fiecare rută returnează o pagină diferită, în funcție de adresa URL transmisă către recuzită de cale . Creați un dosar nou numit Pagini și adăugați patru componente — pagina Acasă, Explorare, Statistici și Setări. Iată un exemplu:

export default function Home() { 
return (
<div>Home</div>
)
}

Dacă vizitați calea /home, ar trebui să vedeți „Acasă”.

Linkurile din bara laterală ar trebui să conducă la pagina potrivită atunci când faceți clic pe ele. În Sidenav.js, modificați funcția map pentru a utiliza componenta NavLink din react-router-dom în loc de elementul div.

{navData.map(item => { 
return <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}

Nu uitați să importați NavLink în partea de sus a fișierului.

import { NavLink } from "react-router-dom"; 

NavLink primește calea URL pentru link prin prop.

Până în acest moment, bara de navigare este deschisă. Pentru a-l face pliabil, îi puteți comuta lățimea schimbând clasa CSS atunci când un utilizator dă clic pe butonul săgeată. Apoi puteți schimba din nou clasa CSS pentru a o deschide.

Pentru a obține această funcționalitate de comutare, trebuie să știți când bara laterală este deschisă și închisă.

? ce înseamnă acest emoji

Pentru aceasta, utilizați cârligul useState. Acest Cârlig de reacție vă permite să adăugați și să urmăriți starea într-o componentă funcțională.

În sideNav.js, creați cârligul pentru starea deschisă.

const [open, setopen] = useState(true) 

Inițializați starea deschisă la adevărat, astfel încât bara laterală va fi întotdeauna deschisă când porniți aplicația.

Apoi, creați funcția care va comuta această stare.

const toggleOpen = () => { 
setopen(!open)
}

Acum puteți utiliza valoarea deschisă pentru a crea clase CSS dinamice, astfel:

<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>

Numele de clasă CSS utilizate vor fi determinate de starea deschisă. De exemplu, dacă open este adevărat, elementul exterior div va avea un nume de clasă sidenav. În caz contrar, clasa va fi sidenavd.

Acest lucru este același pentru pictograma, care se schimbă în pictograma săgeată la dreapta când închideți bara laterală.

Nu uitați să-l importați.

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; 

Componenta barei laterale este acum pliabilă.

Luați codul complet din acesta Depozitul GitHub si incearca si tu.

Styling React Components

React simplifică construirea unei componente de navigare pliabilă. Puteți folosi unele dintre instrumentele pe care React le oferă, cum ar fi react-router-dom, pentru a gestiona rutarea și cârlige pentru a ține evidența stării de colaps.

De asemenea, puteți utiliza module CSS pentru a stila componentele, deși nu este necesar. Folosiți-le pentru a crea clase cu scop local care sunt unice și pe care le puteți scutura din fișierele pachetului dacă nu sunt utilizate.