Kako ustvariti zložljiv navigacijski meni z uporabo React

Kako ustvariti zložljiv navigacijski meni z uporabo React

Navigacijski meni v stranski vrstici je običajno sestavljen iz navpičnega seznama povezav. V Reactu lahko ustvarite niz povezav z uporabo react-router-dom.





Sledite tem korakom, da ustvarite stranski navigacijski meni React s povezavami, ki vsebujejo materialne ikone uporabniškega vmesnika. Povezave bodo prikazale različne strani, ko jih kliknete.





Ustvarjanje aplikacije React

Če že imate a Projekt React , lahko preskočite na naslednji korak.





MAKEUSEOF VIDEO DNEVA

Z ukazom create-react-app lahko hitro začnete uporabljati React. Za vas namesti vse odvisnosti in konfiguracijo.

Zaženite naslednji ukaz, da ustvarite projekt React z imenom react-sidenav.



npx create-react-app react-sidenav 

To bo ustvarilo mapo react-sidenav z nekaj datotekami za lažji začetek. Če želite to mapo nekoliko počistiti, se pomaknite do mape src in zamenjajte vsebino App.js s tem:

import './App.css'; 

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

export default App;

Ustvarjanje navigacijske komponente

Navigacijska komponenta, ki jo boste ustvarili, bo videti takole:





  Nestrnjen pogled navigacijskega menija React

Je precej preprosto, a ko končate, bi ga morali spremeniti, da bo ustrezalo vašim potrebam. Navigacijsko komponento lahko strnete z ikono dvojne puščice na vrhu:

  Strnjen pogled navigacijskega menija React

Začnite z ustvarjanjem nestrnjenega pogleda. Stranska vrstica poleg ikone puščice vsebuje seznam elementov. Vsak od teh elementov ima ikono in nekaj besedila. Namesto ponavljajočega se ustvarjanja elementa za vsakega, lahko podatke za vsak element shranite v matriko in nato ponavljate po njem s funkcijo zemljevida.





Za predstavitev ustvarite novo mapo z imenom lib in dodajte novo datoteko z imenom navData.js.

zunanji trdi disk ni zaznan v sistemu Windows 7
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"
}
]

Zgoraj uporabljene ikone so iz knjižnice Material UI, zato jo najprej namestite s tem ukazom:

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

Nato ustvarite mapo z imenom Komponente in dodajte novo komponento, imenovano Sidenav.js .

V to datoteko uvozite navData iz ../lib in ustvarite okostje za Sidenav funkcija:

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

Če želite ustvariti povezave, spremenite element div v tej komponenti v to:

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

Ta komponenta ustvari navigacijsko povezavo, ki vsebuje ikono in besedilo povezave za vsako ponovitev v funkciji zemljevida.

Element gumba vsebuje ikono puščice levo iz knjižnice materialnega uporabniškega vmesnika. Uvozite ga na vrh komponente s to kodo.

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

Morda ste tudi opazili, da se imena razredov sklicujejo na objekt slogov. To je zato, ker ta vadnica uporablja module CSS. Moduli CSS vam omogočajo ustvarjanje slogov z lokalnim obsegom v Reactu . Če ste za začetek tega projekta uporabili aplikacijo create-react-app, vam ni treba ničesar namestiti ali konfigurirati.

V mapi Komponente ustvarite novo datoteko z imenom sidenav.module.css in dodajte naslednje:

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

Nastavitev usmerjevalnika React

Elementi div, ki jih vrne funkcija zemljevida, morajo biti povezave. V Reactu lahko ustvarite povezave in poti z uporabo react-router-dom.

V terminalu namestite react-router-dom prek npm.

npm install react-router-dom@latest 

Ta ukaz namesti najnovejšo različico react-router-dom.

V Index.js ovijte komponento aplikacije z usmerjevalnikom.

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

Nato v App.js dodajte svoje poti.

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;

Spremenite App.css s temi slogi.

body { 
margin: 0;
padding: 0;
}

.App {
display: flex;
}

main {
padding: 10px;
}

Vsaka pot vrne drugo stran, odvisno od URL-ja, posredovanega v rekviziti poti . Ustvarite novo mapo z imenom Strani in dodajte štiri komponente – stran Domov, Raziskovanje, Statistika in Nastavitve. Tukaj je primer:

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

Če obiščete pot /home, bi morali videti »Domov«.

Povezave v stranski vrstici bi morale voditi do ustrezne strani, ko jih kliknete. V Sidenav.js spremenite funkcijo zemljevida tako, da namesto elementa div uporablja komponento NavLink iz react-router-dom.

{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 pozabite uvoziti NavLink na vrh datoteke.

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

NavLink prejme pot URL za povezavo prek prop.

Do te točke je navigacijska vrstica odprta. Če ga želite zložiti, lahko spremenite njegovo širino tako, da spremenite razred CSS, ko uporabnik klikne gumb s puščico. Nato lahko znova spremenite razred CSS, da ga odprete.

Če želite doseči to preklopno funkcijo, morate vedeti, kdaj je stranska vrstica odprta in kdaj zaprta.

Za to uporabite kljuko useState. to React hook omogoča dodajanje in spremljanje stanja v funkcionalni komponenti.

V sideNav.js ustvarite kavelj za odprto stanje.

const [open, setopen] = useState(true) 

Inicializirajte odprto stanje na true, tako da bo stranska vrstica vedno odprta, ko zaženete aplikacijo.

Nato ustvarite funkcijo, ki bo preklopila to stanje.

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

Zdaj lahko uporabite odprto vrednost za ustvarjanje dinamičnih razredov CSS, kot je ta:

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

Uporabljena imena razredov CSS bodo določena z odprtim stanjem. Na primer, če je open nastavljeno na true, bo imel zunanji element div ime razreda sidenav. V nasprotnem primeru bo razred sidenavd.

To velja za ikono, ki se spremeni v ikono puščice desno, ko zaprete stransko vrstico.

Ne pozabite ga uvoziti.

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

Komponenta stranske vrstice je zdaj zložljiva.

Zgrabi celotno kodo iz tega Repozitorij GitHub in poskusite sami.

Styling React komponente

React omogoča preprosto izdelavo zložljive navigacijske komponente. Uporabite lahko nekaj orodij, ki jih nudi React, kot je react-router-dom, za upravljanje z usmerjanjem in kavlji za spremljanje strnjenega stanja.

Module CSS lahko uporabite tudi za oblikovanje komponent, čeprav vam ni treba. Uporabite jih za ustvarjanje razredov z lokalnim obsegom, ki so edinstveni in jih lahko stresete iz datotek svežnja, če niso v uporabi.