Un menu di navigazione della barra laterale consiste in genere in un elenco verticale di collegamenti. Puoi creare una serie di collegamenti in React usando react-router-dom.
Segui questi passaggi per creare un menu di navigazione laterale React con collegamenti contenenti icone dell'interfaccia utente del materiale. I collegamenti visualizzeranno pagine diverse quando si fa clic su di essi.
Creazione di un'applicazione di reazione
Se hai già un Reagire progetto, sentiti libero di saltare al passaggio successivo.
Puoi utilizzare il comando create-react-app per iniziare rapidamente a utilizzare React. Installa tutte le dipendenze e la configurazione per te.
Esegui il comando seguente per creare un progetto React chiamato react-sidenav.
npx creare-react-app react-sidenav
Questo creerà una cartella react-sidenav con alcuni file per iniziare. Per ripulire un po' questa cartella, vai alla cartella src e sostituisci il contenuto di App.js con questo:
importare './App.css';funzioneApp() {
Restituzione (
<div nomeclasse="App"></div>
);
}
esportarepredefinito App;
Creazione del componente di navigazione
Il componente di navigazione che creerai sarà simile al seguente:
È piuttosto semplice, ma una volta terminato, dovresti essere in grado di modificarlo in base alle tue esigenze. Puoi comprimere il componente di navigazione utilizzando l'icona a doppia freccia in alto:
Inizia creando la vista non compressa. Oltre all'icona della freccia, la barra laterale contiene un elenco di elementi. Ciascuno di questi elementi ha un'icona e del testo. Invece di creare ripetutamente un elemento per ciascuno, puoi archiviare i dati per ogni elemento in un array e quindi scorrere su di esso utilizzando una funzione di mappa.
Per dimostrare, crea una nuova cartella chiamata lib e aggiungi un nuovo file chiamato navData.js.
importare HomeIcona da '@mui/icons-material/Home';
importare TravelExploreIcona da '@mui/icons-material/TravelExplore';
importare Icona Grafico a Barre da '@mui/icons-material/BarChart';
importare ImpostazioniIcona da '@mui/icons-material/Impostazioni';
esportarecost dati di navigazione = [
{
id: 0,
icona: <HomeIcona/>,
testo: "Casa",
collegamento: "/"
},
{
id: 1,
icona: <TravelExploreIcona/>,
testo: "Esplorare",
collegamento: "Esplorare"
},
{
id: 2,
icona: <Icona Grafico a Barre/>,
testo: "Statistiche",
collegamento: "statistiche"
},
{
id: 3,
icona: <ImpostazioniIcona/>,
testo: "Impostazioni",
collegamento: "impostazioni"
}
]
Le icone utilizzate sopra provengono dalla libreria Material UI, quindi installala prima usando questo comando:
npm installazione @mui/material @emozione/react @emozione/styled
npm installazione @mui/icons-material
Quindi, crea una cartella chiamata Componenti e aggiungi un nuovo componente chiamato Sidenav.js.
In questo file, importa navData da ../lib e crea lo scheletro per il Sidenav funzione:
// In Sidenav.js
importare {navData} da "../lib/navData";
esportarepredefinitofunzioneSidenav() {
Restituzione (
<div>
</div>
)
}
Per creare i collegamenti, modifica l'elemento div in questo componente in questo modo:
<div>
<button className={styles.menuBtn}>
<TastieraDoppiaFrecciaSinistraIcona />
</button>
{navData.map (elemento =>{
Restituzione <chiave div={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Questo componente crea un collegamento di navigazione contenente l'icona e il testo del collegamento per ogni iterazione nella funzione mappa.
L'elemento pulsante contiene l'icona della freccia sinistra dalla libreria dell'interfaccia utente del materiale. Importalo nella parte superiore del componente usando questo codice.
importare Icona TastieraDoppiaFrecciaSinistra da '@mui/icons-material/KeyboardDoubleArrowLeft';
Potresti anche aver notato che i nomi delle classi fanno riferimento a un oggetto stili. Questo perché questo tutorial utilizza i moduli CSS. I moduli CSS ti consentono di creare stili con ambito locale in React. Non è necessario installare o configurare nulla se hai utilizzato create-react-app per avviare questo progetto.
Nella cartella Componenti, crea un nuovo file chiamato sidenav.module.css e aggiungi quanto segue:
.sidenav {
larghezza: 250px;
transizione: larghezza 0.3sfacilità d'ingresso;
altezza: 100vh;
colore di sfondo: rgb (10,25,41);
imbottitura superiore: 28px;
}.sidenavChiuso {
compone: sidenav;
transizione: larghezza 0.3sfacilità d'ingresso;
larghezza: 60px
}.elemento laterale {
display: flessibile;
allineare-elementi: centro;
imbottitura: 10px 20px;
cursore: puntatore;
colore: #B2BAC2;
decorazione del testo: nessuna;
}.linkText {
riempimento a sinistra: 16px;
}.linkTextChiuso {
compone: linkText;
visibilità: nascosta;
}.elemento laterale: passa il mouse {
colore di sfondo: #244f7d1c;
}
.menuBtn {
allineare-se stesso: centro;
align-self: flex-inizio;
giustificarsi: flex-fine;
colore: #B2BAC2;
colore di sfondo: trasparente;
confine: nessuno;
cursore: puntatore;
riempimento a sinistra: 20px;
}
Configurazione del router React
Gli elementi div restituiti dalla funzione map dovrebbero essere collegamenti. In React, puoi creare collegamenti e percorsi utilizzando react-router-dom.
Nel terminale, installa react-router-dom tramite npm.
npm install react-router-dom@ultimo
Questo comando installa l'ultima versione di react-router-dom.
In Index.js, avvolgi il componente App con il router.
importare Reagire da 'reagire';
importare ReagireDOM da 'react-dom/client';
importare App da './App';
importare {BrowserRouter} da 'reagire-router-dom';
cost root = ReactDOM.createRoot(documento.getElementById('radice'));
radice.rendere(
<Reagire. Modalità rigorosa>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Quindi, in App.js, aggiungi i tuoi percorsi.
importare {
BrowserRouter,
Itinerari,
Percorso,
} da "reagire-router-dom";importare './App.css';
importare Sidenav da './Componenti/Sidenav';
importare Esplorare da "./Pagine/Esplora";
importare Casa da "./Pagine/Home";
importare Impostazioni da "./Pagine/Impostazioni";
importare Statistiche da "./Pagine/Statistiche";
funzioneApp() {
Restituzione (
<div nomeclasse="App">
<Sidenav/>
<principale>
<Itinerari>
<Percorso percorso="/" elemento={<Casa />}/>
<Percorso percorso="/explore" elemento={<Esplorare />} />
<Percorso percorso="/statistics" elemento={<Statistiche />}/>
<Percorso percorso="/settings" elemento={<Impostazioni />} />
</Routes>
</main>
</div>
);
}
esportarepredefinito App;
Modifica App.css con questi stili.
corpo {
margine: 0;
imbottitura: 0;
}.App {
display: flessibile;
}
principale {
imbottitura: 10px;
}
Ciascun percorso restituisce una pagina diversa a seconda dell'URL passato al puntelli di percorso. Crea una nuova cartella denominata Pagine e aggiungi quattro componenti: Pagina iniziale, Esplora, Statistiche e Impostazioni. Ecco un esempio:
esportarepredefinitofunzioneCasa() {
Restituzione (
<div>Casa</div>
)
}
Se visiti il percorso /home, dovresti vedere "Home".
I collegamenti nella barra laterale dovrebbero portare alla pagina corrispondente quando fai clic su di essi. In Sidenav.js, modifica la funzione della mappa per utilizzare il componente NavLink da react-router-dom invece dell'elemento div.
{navData.map (elemento => {
Restituzione <Chiave NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Ricordarsi di importare NavLink nella parte superiore del file.
importare { NavLink } da "reagire-router-dom";
NavLink riceve il percorso dell'URL per il collegamento tramite il to prop.
Fino a questo punto la barra di navigazione è aperta. Per renderlo comprimibile, puoi cambiarne la larghezza modificando la classe CSS quando un utente fa clic sul pulsante freccia. È quindi possibile modificare nuovamente la classe CSS per aprirla.
Per ottenere questa funzionalità di attivazione/disattivazione, devi sapere quando la barra laterale è aperta e chiusa.
Per questo, usa l'hook useState. Questo Gancio di reazione consente di aggiungere e tenere traccia dello stato in un componente funzionale.
In sideNav.js, crea l'hook per lo stato aperto.
cost [open, setopen] = useState(VERO)
Inizializza lo stato aperto su true, quindi la barra laterale sarà sempre aperta all'avvio dell'applicazione.
Quindi, crea la funzione che attiverà questo stato.
cost toggleOpen = () => {
setopen(!open)
}
Ora puoi utilizzare il valore aperto per creare classi CSS dinamiche come questa:
<div nomeclasse={apri? stili.sidenav: stili.sidenavChiuso}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{aprire? <TastieraDoppiaFrecciaSinistraIcona />: <TastieraDoppiaFrecciaDestraIcona />}
</button>
{navData.map (elemento =>{
Restituzione <Chiave NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span nomeclasse={apri? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
I nomi delle classi CSS utilizzati saranno determinati dallo stato aperto. Ad esempio, se open è true, l'elemento div esterno avrà un nome di classe sidenav. In caso contrario, la classe sarà sidenavClosed.
Questo è lo stesso per l'icona, che cambia nell'icona della freccia destra quando chiudi la barra laterale.
Ricordati di importarlo.
importare TastieraDoppiaFrecciaDestraIcona da '@mui/icons-material/KeyboardDoubleArrowRight';
Il componente della barra laterale ora è comprimibile.
Prendi il codice completo da questo Archivio GitHub e prova tu stesso.
Styling dei componenti di reazione
React semplifica la creazione di un componente di navigazione comprimibile. È possibile utilizzare alcuni degli strumenti forniti da React come react-router-dom per gestire il routing e gli hook per tenere traccia dello stato compresso.
Puoi anche usare i moduli CSS per definire lo stile dei componenti, anche se non è necessario. Usali per creare classi con ambito locale che sono uniche e che puoi rimuovere dai file bundle se non sono in uso.
