En navigeringsmeny i sidofältet består vanligtvis av en vertikal lista med länkar. Du kan skapa en uppsättning länkar i React med hjälp av react-router-dom.
Följ dessa steg för att skapa en React-sidonavigeringsmeny med länkar som innehåller materiella UI-ikoner. Länkarna renderar olika sidor när du klickar på dem.
Skapa en React-applikation
Om du redan har en Reagera projekt, hoppa gärna till nästa steg.
Du kan använda kommandot create-react-app för att snabbt komma igång med React. Den installerar alla beroenden och konfigurationer åt dig.
Kör följande kommando för att skapa ett React-projekt som heter react-sidenav.
npx skapa-react-app react-sidenav
Detta kommer att skapa en react-sidenav-mapp med några filer för att komma igång. För att rensa upp den här mappen lite, navigera till mappen src och ersätt innehållet i App.js med detta:
importera './App.css';fungeraApp() {
lämna tillbaka (
<div className="App"></div>
);
}
exporterastandard App;
Skapa navigationskomponenten
Navigationskomponenten du skapar kommer att se ut så här:
Det är ganska enkelt, men när du är klar bör du kunna modifiera den för att passa dina behov. Du kan komprimera navigeringskomponenten med hjälp av dubbelpilikonen högst upp:
Börja med att skapa den icke-komprimerade vyn. Förutom pilikonen innehåller sidofältet en lista med objekt. Var och en av dessa objekt har en ikon och lite text. Istället för att upprepade gånger skapa ett element för varje, kan du lagra data för varje objekt i en array och sedan iterera över det med en kartfunktion.
För att demonstrera, skapa en ny mapp som heter lib och lägg till en ny fil som heter navData.js.
importera HomeIcon från '@mui/icons-material/Home';
importera TravelExploreIcon från '@mui/icons-material/TravelExplore';
importera BarChartIcon från '@mui/icons-material/BarChart';
importera Inställningsikon från '@mui/icons-material/Inställningar';
exporterakonst navData = [
{
id: 0,
ikon: <HomeIcon/>,
text: "Hem",
länk: "/"
},
{
id: 1,
ikon: <TravelExploreIcon/>,
text: "Utforska",
länk: "utforska"
},
{
id: 2,
ikon: <BarChartIcon/>,
text: "Statistik",
länk: "statistik"
},
{
id: 3,
ikon: <SettingsIcon/>,
text: "inställningar",
länk: "inställningar"
}
]
Ikonerna som används ovan är från Material UI-biblioteket, så installera det först med det här kommandot:
npm installera @mui/material @känsla/react @känsla/styled
npm installera @mui/icons-material
Skapa sedan en mapp som heter Komponenter och lägg till en ny komponent som heter Sidenav.js.
I den här filen, importera navData från ../lib och skapa skelettet för Sidenav fungera:
// I Sidenav.js
importera { navData } från "../lib/navData";
exporterastandardfungeraSidenav() {
lämna tillbaka (
<div>
</div>
)
}
För att skapa länkarna, ändra div-elementet i den här komponenten till detta:
<div>
<button className={styles.menuBtn}>
<TangentbordDouble ArrowLeftIcon />
</button>
{navData.map (objekt =>{
lämna tillbaka <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Denna komponent skapar en navigeringslänk som innehåller ikonen och länktexten för varje iteration i kartfunktionen.
Knappelementet håller den vänstra pilikonen från Material UI-biblioteket. Importera den överst i komponenten med den här koden.
importera TangentbordDouble ArrowLeftIcon från '@mui/icons-material/KeyboardDoubleArrowLeft';
Du kanske också har märkt att klassnamnen refererar till ett stilobjekt. Detta beror på att denna handledning använder CSS-moduler. CSS-moduler låter dig skapa stilar med lokal omfattning i React. Du behöver inte installera eller konfigurera något om du använde create-react-app för att starta det här projektet.
Skapa en ny fil som heter i mappen Komponenter sidanav.module.css och lägg till följande:
.sidenav {
bredd: 250px;
övergång: bredd 0.3slätta-in-ut;
höjd: 100vh;
bakgrundsfärg: rgb (10,25,41);
padding-top: 28px;
}.sidenavStängd {
komponerar: sidenav;
övergång: bredd 0.3slätta-in-ut;
bredd: 60px
}.sideartikel {
display: flex;
align-items: center;
stoppning: 10px 20px;
markör: pekare;
Färg: #B2BAC2;
text-dekoration: ingen;
}.linkText {
stoppning-vänster: 16px;
}.linkTextClosed {
komponerar: linkText;
synlighet: dold;
}.sideartikel:sväva {
bakgrundsfärg: #244f7d1c;
}
.menuBtn {
justera-själv: Centrum;
align-self: flex-Start;
rättfärdiga-själv: flexa-slutet;
Färg: #B2BAC2;
bakgrundsfärg: transparent;
gräns: ingen;
markör: pekare;
padding-vänster: 20px;
}
Konfigurera React Router
De div-element som returneras av kartfunktionen bör vara länkar. I React kan du skapa länkar och rutter med hjälp av react-router-dom.
Installera react-router-dom via npm i terminalen.
npm installera react-router-dom@senast
Detta kommando installerar den senaste versionen av react-router-dom.
I Index.js lindar du appkomponenten med routern.
importera Reagera från 'reagera';
importera ReactDOM från 'reagera-dom/klient';
importera App från './App';
importera { BrowserRouter } från 'reagera-router-dom';
konst root = ReactDOM.createRoot(dokumentera.getElementById('root'));
rot.framställa(
<Reagera. StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Lägg sedan till dina rutter i App.js.
importera {
BrowserRouter,
Rutter,
Rutt,
} från "reagera-router-dom";importera './App.css';
importera Sidenav från './Components/Sidenav';
importera Utforska från "./Pages/Utforska";
importera Hem från "./Pages/Home";
importera inställningar från "./Pages/Settings";
importera Statistik från "./Pages/Statistics";
fungeraApp() {
lämna tillbaka (
<div className="App">
<Sidenav/>
<huvud>
<Rutter>
<Vägväg="/" element={<Hem />}/>
<Vägväg="/explore" element={<Utforska />} />
<Vägväg="/statistics" element={<Statistik />}/>
<Vägväg="/settings" element={<Inställningar />} />
</Routes>
</main>
</div>
);
}
exporterastandard App;
Ändra App.css med dessa stilar.
kropp {
marginal: 0;
stoppning: 0;
}.App {
display: flex;
}
huvud {
stoppning: 10px;
}
Varje rutt returnerar en annan sida beroende på webbadressen som skickas till väg rekvisita. Skapa en ny mapp som heter Sidor och lägg till fyra komponenter - sidan Hem, Utforska, Statistik och Inställningar. Här är ett exempel:
exporterastandardfungeraHem() {
lämna tillbaka (
<div>Hem</div>
)
}
Om du besöker /hemvägen bör du se "Hem".
Länkarna i sidofältet ska leda till den matchande sidan när du klickar på dem. I Sidenav.js, ändra kartfunktionen för att använda NavLink-komponenten från react-router-dom istället för div-elementet.
{navData.map (objekt => {
lämna tillbaka <NavLink key={item.id} className={styles.sideitem} till={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Kom ihåg att importera NavLink överst i filen.
importera { NavLink } från "reagera-router-dom";
NavLink tar emot URL-sökvägen för länken genom till prop.
Fram till denna punkt är navigeringsfältet öppet. För att göra den hopfällbar kan du ändra dess bredd genom att ändra CSS-klassen när en användare klickar på pilknappen. Du kan sedan ändra CSS-klassen igen för att öppna den.
För att uppnå denna växlingsfunktion måste du veta när sidofältet är öppet och stängt.
För detta använder du useState-kroken. Detta Reagera krok låter dig lägga till och spåra tillståndet i en funktionell komponent.
I sideNav.js skapar du kroken för öppet tillstånd.
konst [open, setopen] = useState(Sann)
Initiera öppet tillstånd till sant, så att sidofältet alltid är öppet när du startar programmet.
Skapa sedan funktionen som växlar detta tillstånd.
konst toggleOpen = () => {
setopen(!open)
}
Du kan nu använda det öppna värdet för att skapa dynamiska CSS-klasser så här:
<div className={öppen? styles.sidenav: styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{öppna? <TangentbordDouble ArrowLeftIcon />: <TangentbordDouble ArrowRightIcon />}
</button>
{navData.map (objekt =>{
lämna tillbaka <NavLink key={item.id} className={styles.sideitem} till={item.link}>
{item.icon}
<span className={öppen? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
CSS-klassnamnen som används bestäms av det öppna tillståndet. Till exempel, om open är sant, kommer det yttre div-elementet att ha ett sidanav-klassnamn. Annars kommer klassen att vara avstängd.
Detta är samma sak för ikonen, som ändras till högerpilikonen när du stänger sidofältet.
Kom ihåg att importera den.
importera TangentbordDouble ArrowRightIcon från '@mui/icons-material/KeyboardDoubleArrowRight';
Sidofältskomponenten är nu hopfällbar.
Ta hela koden från detta GitHub-förråd och prova själv.
Styling React-komponenter
React gör det enkelt att bygga en hopfällbar navigeringskomponent. Du kan använda några av verktygen som React tillhandahåller som react-router-dom för att hantera routing och krokar för att hålla reda på det kollapsade tillståndet.
Du kan också använda CSS-moduler för att utforma komponenter, även om du inte måste. Använd dem för att skapa lokalt omfångade klasser som är unika och som du kan skaka från paketfilerna om de inte används.