Home-theater-designers
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 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.
MAKEUSEVAN VIDEO VAN DE DAG
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 create-react-app react-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:
import './App.css';
function App() {
return (
<div className="App"></div>
);
}
export default 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.
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"
}
]
De hierboven gebruikte pictogrammen komen uit de Material UI-bibliotheek, dus installeer deze eerst met deze opdracht:
mijn externe harde schijf wordt niet weergegeven
npm install @mui/material @emotion/react @emotion/styled
npm install @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
import { navData } from "../lib/navData";
export default function Sidenav() {
return (
<div>
</div>
)
}
Om de koppelingen te maken, wijzigt u het div-element in deze component naar dit:
<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>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.
import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/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 {
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;
}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@latest
Met deze opdracht wordt de nieuwste versie van react-router-dom geïnstalleerd.
Wikkel in Index.js de app-component met de router.
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>
);
Voeg vervolgens in App.js uw routes toe.
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;
Wijzig App.css met deze stijlen.
body {
margin: 0;
padding: 0;
}
.App {
display: flex;
}
main {
padding: 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:
export default function Home() {
return (
<div>Home</div>
)
}
Als u het /home-pad bezoekt, zou u 'Home' moeten zien.
Navigatiekoppelingen wijzigen
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 => {
return <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Vergeet niet om NavLink bovenaan het bestand te importeren.
import { NavLink } from "react-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, setopen] = useState(true)
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 = () => {
setopen(!open)
}
U kunt nu de open waarde gebruiken om dynamische CSS-klassen als volgt te maken:
<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>
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 sidenavd.
Dit is hetzelfde voor het pictogram, dat verandert in het pictogram met de pijl naar rechts wanneer u de zijbalk sluit.
hoe ps3 te gebruiken om gegevens van een andere gebruiker op te slaan
Vergeet niet om het te importeren.
import KeyboardDoubleArrowRightIcon from '@mui/icons-material/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.