Een navigatiemenu in de zijbalk bestaat meestal uit een verticale lijst met links. Je kunt een set links maken in React met behulp van react-router-dom.
Volg deze stappen om een React-navigatiemenu aan de zijkant te maken met links die materiële UI-pictogrammen bevatten. De links geven verschillende pagina's weer als u erop klikt.
Een React-toepassing maken
Als je al een Reageer project, ga gerust naar de volgende stap.
U kunt de opdracht create-react-app gebruiken om snel aan de slag te gaan met React. Het installeert alle afhankelijkheden en configuratie voor u.
Voer de volgende opdracht uit om een React-project met de naam react-sidenav te maken.
npx creëren-reageren-app reageren-sidenav
Dit zal een react-sidenav-map maken met enkele bestanden om u op weg te helpen. Om deze map een beetje op te schonen, navigeert u naar de src-map en vervangt u de inhoud van App.js hiermee:
importeren './App.css';functieApp() {
opbrengst (
<div className="App"></div>
);
}
exporterenstandaard App;
De navigatiecomponent maken
De navigatiecomponent die u gaat maken, ziet er als volgt uit:
Het is vrij eenvoudig, maar als je eenmaal klaar bent, zou je het moeten kunnen aanpassen aan je behoeften. U kunt de navigatiecomponent samenvouwen met behulp van het dubbele pijlpictogram bovenaan:
Begin met het maken van de niet-samengevouwen weergave. Afgezien van het pijlpictogram bevat de zijbalk een lijst met items. Elk van deze items heeft een pictogram en wat tekst. In plaats van herhaaldelijk een element voor elk item te maken, kunt u de gegevens voor elk item in een array opslaan en er vervolgens over herhalen met behulp van een kaartfunctie.
Maak om te demonstreren een nieuwe map met de naam lib en voeg een nieuw bestand toe met de naam navData.js.
importeren HomeIcoon van '@mui/icons-materiaal/Home';
importeren ReizenVerkennenIcon van '@mui/icons-materiaal/TravelExplore';
importeren StaafdiagramIcoon van '@mui/icons-materiaal/BarChart';
importeren InstellingenIcoon van '@mui/icons-materiaal/Instellingen';
exporterenconst navData = [
{
identiteitsbewijs: 0,
icoon: <HomeIcoon/>,
tekst: "Huis",
koppeling: "/"
},
{
identiteitsbewijs: 1,
icoon: <ReizenVerkennenIcon/>,
tekst: "Ontdekken",
koppeling: "ontdekken"
},
{
identiteitsbewijs: 2,
icoon: <StaafdiagramIcoon/>,
tekst: "Statistieken",
koppeling: "statistieken"
},
{
identiteitsbewijs: 3,
icoon: <InstellingenIcoon/>,
tekst: "Instellingen",
koppeling: "instellingen"
}
]
De hierboven gebruikte pictogrammen komen uit de Material UI-bibliotheek, dus installeer deze eerst met deze opdracht:
npm installeren @mui/material @emotie/react @emotie/styled
npm installeren @mui/icons-material
Maak vervolgens een map met de naam Componenten en voeg een nieuwe component toe genaamd Sidenav.js.
Importeer in dit bestand navData uit ../lib en maak het skelet voor de Sidenav functie:
// In Sidenav.js
importeren { navData } van "../lib/navData";
exporterenstandaardfunctieSidenav() {
opbrengst (
<div>
</div>
)
}
Om de koppelingen te maken, wijzigt u het div-element in deze component naar dit:
<div>
<knop className={styles.menuBtn}>
<ToetsenbordDubbel PijlLinksIcon />
</button>
{navData.map (item =>{
opbrengst <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.tekst}</span>
</div>
})}
</div>Deze component maakt een navigatielink met het pictogram en de linktekst voor elke iteratie in de kaartfunctie.
Het knopelement bevat het linkerpijlpictogram uit de materiaal-UI-bibliotheek. Importeer het bovenaan het onderdeel met behulp van deze code.
importeren ToetsenbordDubbele PijlLinksIcon van '@mui/icons-materiaal/KeyboardDoubleArrowLeft';
Het is je misschien ook opgevallen dat de klassenamen verwijzen naar een stijlen-object. Dit komt omdat deze tutorial CSS-modules gebruikt. Met CSS-modules kunt u stijlen met een lokaal bereik maken in React. Je hoeft niets te installeren of te configureren als je create-react-app hebt gebruikt om dit project te starten.
Maak in de map Componenten een nieuw bestand met de naam sidenav.module.css en voeg het volgende toe:
.sidenav {
breedte: 250px;
overgang: breedte 0.3sgemak-in-uit;
hoogte: 100vh;
achtergrondkleur: rgb (10,25,41);
opvulling-top: 28px;
}.sidenavGesloten {
componeert: sidenav;
overgang: breedte 0.3sgemak-in-uit;
breedte: 60px
}.bijzaak {
weergave: flexibel;
align-items: midden;
opvulling: 10px 20px;
cursor: aanwijzer;
kleur: #B2BAC2;
tekstdecoratie: geen;
}.verbind tekst {
opvulling-links: 16px;
}.linkTextClosed {
stelt samen: linkText;
zichtbaarheid: verborgen;
}.bijzaak:zweven {
Achtergrond kleur: #244f7d1c;
}
.menuBtn {
uitlijnen-zelf: centrum;
align-self: flex-begin;
rechtvaardig-zelf: flex-einde;
kleur: #B2BAC2;
achtergrondkleur: transparant;
grens: geen;
cursor: aanwijzer;
opvulling-links: 20px;
}
React-router instellen
De div-elementen die door de kaartfunctie worden geretourneerd, moeten links zijn. In React kun je links en routes maken met behulp van react-router-dom.
Installeer in de terminal react-router-dom via npm.
npm install react-router-dom@laatste
Met deze opdracht wordt de nieuwste versie van react-router-dom geïnstalleerd.
Wikkel in Index.js de app-component met de router.
importeren Reageer van 'Reageer';
importeren ReactDOM van 'reageer-dom/klant';
importeren App van './App';
importeren { BrowserRouter } van 'reageren-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
wortel.veroorzaken(
<Reageer. Strikte modus>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Voeg vervolgens in App.js uw routes toe.
importeren {
BrowserRouter,
Routes,
Route,
} van "react-router-dom";importeren './App.css';
importeren Sidenav van './Componenten/Sidenav';
importeren Ontdekken van "./Pagina's/Verkennen";
importeren Huis van "./Pagina's/Home";
importeren Instellingen van "./Pagina's/Instellingen";
importeren Statistieken van "./Pagina's/Statistieken";
functieApp() {
opbrengst (
<div className="App">
<zijnav/>
<hoofd>
<Routes>
<Routepad="/" element={<Huis />}/>
<Routepad="/explore" element={<Ontdekken />} />
<Routepad="/statistics" element={<Statistieken />}/>
<Routepad="/settings" element={<Instellingen />} />
</Routes>
</main>
</div>
);
}
exporterenstandaard App;
Wijzig App.css met deze stijlen.
lichaam {
marge: 0;
opvulling: 0;
}.App {
weergave: flexibel;
}
hoofd {
opvulling: 10px;
}
Elke route retourneert een andere pagina, afhankelijk van de URL die is doorgegeven aan de pad rekwisieten. Maak een nieuwe map met de naam Pages en voeg vier componenten toe: de pagina Home, Verkennen, Statistieken en Instellingen. Hier is een voorbeeld:
exporterenstandaardfunctieHuis() {
opbrengst (
<div>Huis</div>
)
}
Als u het /home-pad bezoekt, zou u "Home" moeten zien.
De links in de zijbalk moeten naar de overeenkomende pagina leiden wanneer u erop klikt. Wijzig in Sidenav.js de kaartfunctie om de NavLink-component van react-router-dom te gebruiken in plaats van het div-element.
{navData.map (item => {
opbrengst <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.tekst}</span>
</NavLink>
})}
Vergeet niet om NavLink bovenaan het bestand te importeren.
importeren { NavLink } van "reageren-router-dom";
NavLink ontvangt het URL-pad voor de link via de naar prop.
Tot dit punt is de navigatiebalk geopend. Om het inklapbaar te maken, kunt u de breedte wijzigen door de CSS-klasse te wijzigen wanneer een gebruiker op de pijlknop klikt. U kunt de CSS-klasse vervolgens opnieuw wijzigen om deze te openen.
Om deze schakelfunctionaliteit te bereiken, moet u weten wanneer de zijbalk open en gesloten is.
Gebruik hiervoor de useState hook. Deze Reageerhaak stelt u in staat om de status in een functionele component toe te voegen en te volgen.
Maak in sideNav.js de haak voor de open status.
const [open, stelopen] = useState(WAAR)
Initialiseer de open-status naar waar, zodat de zijbalk altijd open is wanneer u de toepassing start.
Maak vervolgens de functie die deze status omschakelt.
const toggleOpen = () => {
instellenopen(!openen)
}
U kunt nu de open waarde gebruiken om dynamische CSS-klassen als volgt te maken:
<div className={openen? stijlen.sidenav: stijlen.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{open? <ToetsenbordDubbel PijlLinksIcon />: <ToetsenbordDubbel PijlRechtsIcoon />}
</button>
{navData.map (item =>{
opbrengst <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={openen? stijlen.linkText: stijlen.linkTextClosed}>{item.tekst}</span>
</NavLink>
})}
</div>
De gebruikte CSS-klassenamen worden bepaald door de open status. Als open bijvoorbeeld waar is, heeft het buitenste div-element een sidenav-klassenaam. Anders wordt de klas sidenavClosed.
Dit is hetzelfde voor het pictogram, dat verandert in het pictogram met de pijl naar rechts wanneer u de zijbalk sluit.
Vergeet niet om het te importeren.
importeren ToetsenbordDubbel PijlRechtsIcoon van '@mui/icons-materiaal/KeyboardDoubleArrowRight';
De zijbalkcomponent is nu inklapbaar.
Pak hier de volledige code uit GitHub-opslagplaats en probeer het zelf.
Styling Reageer-componenten
React maakt het eenvoudig om een inklapbare navigatiecomponent te bouwen. Je kunt enkele van de tools gebruiken die React biedt, zoals react-router-dom om routering en hooks af te handelen om de samengevouwen toestand bij te houden.
U kunt ook CSS-modules gebruiken om componenten op te maken, hoewel dat niet nodig is. Gebruik ze om klassen met een lokaal bereik te maken die uniek zijn en die u uit de bundelbestanden kunt schudden als ze niet in gebruik zijn.