Sivupalkin navigointivalikko koostuu yleensä pystysuuntaisesta linkkiluettelosta. Voit luoda linkkijoukon Reactissa käyttämällä react-router-domia.
Seuraa näitä ohjeita luodaksesi React-sivunavigointivalikon, jossa on materiaalia käyttöliittymäkuvakkeita sisältäviä linkkejä. Linkit näyttävät eri sivuja, kun napsautat niitä.
React-sovelluksen luominen
Jos sinulla on jo a Reagoi projekti, voit siirtyä seuraavaan vaiheeseen.
Voit käyttää Create-react-app -komentoa saadaksesi Reactin nopeasti käyttöön. Se asentaa kaikki riippuvuudet ja asetukset puolestasi.
Suorita seuraava komento luodaksesi React-projektin nimeltä react-sidenav.
npx luoda-react-app react-sidenav
Tämä luo react-sidenav-kansion, jossa on joitakin tiedostoja, jotta pääset alkuun. Jos haluat puhdistaa tätä kansiota hieman, siirry src-kansioon ja korvaa App.js: n sisältö tällä:
tuonti './App.css';toimintoSovellus() {
palata (
<div className="Sovellus"></div>
);
}
viedäoletuksena Sovellus;
Navigointikomponentin luominen
Luotava navigointikomponentti näyttää tältä:
Se on melko yksinkertainen, mutta kun olet valmis, sinun pitäisi pystyä muokkaamaan sitä tarpeidesi mukaan. Voit tiivistää navigointikomponentin käyttämällä yläreunassa olevaa kaksoisnuolikuvaketta:
Aloita luomalla tiivistämätön näkymä. Nuolikuvakkeen lisäksi sivupalkki sisältää luettelon kohteista. Jokaisessa näistä kohteista on kuvake ja tekstiä. Sen sijaan, että luot toistuvasti jokaiselle elementille, voit tallentaa kunkin kohteen tiedot taulukkoon ja iteroida sen yli käyttämällä karttatoimintoa.
Esittelyä varten luo uusi kansio nimeltä lib ja lisää uusi tiedosto nimeltä navData.js.
tuonti Kotikuvake alkaen '@mui/icons-material/Home';
tuonti TravelExploreIcon alkaen '@mui/icons-material/TravelExplore';
tuonti BarChartIcon alkaen '@mui/icons-material/BarChart';
tuonti Asetukset-kuvake alkaen '@mui/icons-material/Settings';
viedäkonst navData = [
{
id: 0,
kuvake: <HomeIcon/>,
teksti: "Koti",
linkki: "/"
},
{
id: 1,
kuvake: <TravelExploreIcon/>,
teksti: "Tutkia",
linkki: "tutkia"
},
{
id: 2,
kuvake: <BarChartIcon/>,
teksti: "Tilastot",
linkki: "tilastot"
},
{
id: 3,
kuvake: <AsetuksetIcon/>,
teksti: "asetukset",
linkki: "asetukset"
}
]
Yllä käytetyt kuvakkeet ovat Material UI -kirjastosta, joten asenna se ensin tällä komennolla:
npm asennus @mui/material @tunne/react @tunne/styled
npm asennus @mui/icons-material
Luo seuraavaksi kansio nimeltä Komponentit ja lisää uusi komponentti nimeltä Sidenav.js.
Tuo tässä tiedostossa navData tiedostosta ../lib ja luo runko tiedostolle Sidenav toiminto:
// Sidenav.js: ssa
tuonti { navData } alkaen "../lib/navData";
viedäoletuksenatoimintoSidenav() {
palata (
<div>
</div>
)
}
Luo linkit muokkaamalla tämän komponentin div-elementti seuraavasti:
<div>
<painike className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map (kohde =>{
palata <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Tämä komponentti luo navigointilinkin, joka sisältää kuvakkeen ja linkkitekstin jokaiselle karttatoiminnon iteraatiolle.
Painikeelementissä on vasen nuolikuvake Material UI -kirjastosta. Tuo se komponentin yläosaan tällä koodilla.
tuonti KeyboardDoubleArrowLeftIcon alkaen '@mui/icons-material/KeyboardDoubleArrowLeft';
Olet ehkä myös huomannut, että luokkien nimet viittaavat tyyliobjektiin. Tämä johtuu siitä, että tämä opetusohjelma käyttää CSS-moduuleja. CSS-moduulien avulla voit luoda paikallisesti suojattuja tyylejä Reactissa. Sinun ei tarvitse asentaa tai määrittää mitään, jos käytit create-react-app-komentoa tämän projektin käynnistämiseen.
Luo Komponentit-kansioon uusi tiedosto nimeltä sidenav.module.css ja lisää seuraavat:
.sidenav {
leveys: 250 pikseliä;
siirtyminen: leveys 0.3shelppous sisään-ulos;
korkeus: 100vh;
taustaväri: rgb (10,25,41);
pehmuste-yläosa: 28px;
}.sidenavClosed {
säveltää: sidenav;
siirtyminen: leveys 0.3shelppous sisään-ulos;
leveys: 60px
}.sideitem {
näyttö: flex;
kohdista kohteet: keskellä;
täyte: 10px 20px;
kohdistin: osoitin;
väri: #B2BAC2;
teksti-koriste: ei mitään;
}.linkText {
täyte-vasen: 16px;
}.linkTextClosed {
säveltää: linkText;
näkyvyys: piilotettu;
}.sideitem:hover {
taustaväri: #244f7d1c;
}
.menuBtn {
kohdistaa-itse: keskus;
kohdista itse: flex-alkaa;
perustella itseään: flex-loppu;
väri: #B2BAC2;
taustaväri: läpinäkyvä;
reuna: ei mitään;
kohdistin: osoitin;
täyte-vasen: 20px;
}
React-reitittimen määrittäminen
Karttafunktion palauttamien div-elementtien tulee olla linkkejä. Reactissa voit luoda linkkejä ja reittejä käyttämällä react-router-domia.
Asenna terminaaliin react-router-dom npm: n kautta.
npm install react-router-dom@Viimeisin
Tämä komento asentaa react-router-domin uusimman version.
Kääri Index.js: n sovelluskomponentti reitittimeen.
tuonti Reagoi alkaen "reagoi";
tuonti ReactDOM alkaen 'react-dom/client';
tuonti Sovellus alkaen './Sovellus';
tuonti { BrowserRouter } alkaen 'react-router-dom';
konst root = ReactDOM.createRoot(asiakirja.getElementById('root'));
juuri.render(
<Reagoi. StrictMode>
<BrowserRouter>
<Sovellus />
</BrowserRouter>
</React.StrictMode>
);
Lisää seuraavaksi reitit App.js: ssä.
tuonti {
BrowserRouter,
Reittejä,
Reitti,
} alkaen "react-router-dom";tuonti './App.css';
tuonti Sidenav alkaen './Components/Sidenav';
tuonti Tutkia alkaen "./Pages/Explore";
tuonti Koti alkaen "./Pages/Home";
tuonti asetukset alkaen "./Pages/Settings";
tuonti Tilastot alkaen "./Pages/Statistics";
toimintoSovellus() {
palata (
<div className="Sovellus">
<Sidenav/>
<pää>
<Reitit>
<Reittipolku="/" element={<Koti />}/>
<Reittipolku="/explore" element={<Tutki />} />
<Reittipolku="/statistics" element={<Tilastot />}/>
<Reittipolku="/settings" element={<Asetukset />} />
</Routes>
</main>
</div>
);
}
viedäoletuksena Sovellus;
Muokkaa App.css-tiedostoa näillä tyyleillä.
body {
marginaali: 0;
pehmuste: 0;
}.Sovellus {
näyttö: flex;
}
main {
täyte: 10px;
}
Jokainen reitti palauttaa eri sivun osoitteeseen välitetyn URL-osoitteen mukaan polun rekvisiitta. Luo uusi kansio nimeltä Sivut ja lisää neljä komponenttia - Koti-, Tutki-, Tilastot- ja Asetukset-sivu. Tässä on esimerkki:
viedäoletuksenatoimintoKoti() {
palata (
<div>Koti</div>
)
}
Jos vierailet /home polulla, sinun pitäisi nähdä "Koti".
Sivupalkin linkkien pitäisi johtaa vastaavalle sivulle, kun napsautat niitä. Muokkaa Sidenav.js: n karttatoimintoa käyttämään NavLink-komponenttia react-router-dom-elementistä div-elementin sijaan.
{navData.map (kohde => {
palata <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Muista tuoda NavLink tiedoston yläreunasta.
tuonti { NavLink } alkaen "react-router-dom";
NavLink vastaanottaa linkin URL-polun "to prop" kautta.
Navigointipalkki on tähän asti auki. Voit tehdä siitä kokoontaitettavan muuttamalla sen leveyttä muuttamalla CSS-luokkaa, kun käyttäjä napsauttaa nuolipainiketta. Voit sitten muuttaa CSS-luokan uudelleen avataksesi sen.
Tämän vaihtotoiminnon saavuttamiseksi sinun on tiedettävä, milloin sivupalkki on auki ja kiinni.
Käytä tätä varten useState-koukkua. Tämä Reaktiokoukku voit lisätä ja seurata toiminnallisen komponentin tilaa.
Luo sideNav.js: ssä avoimen tilan koukku.
konst [open, setopen] = useState(totta)
Alusta avoimeksi tilaksi tosi, jotta sivupalkki on aina auki, kun käynnistät sovelluksen.
Luo seuraavaksi toiminto, joka vaihtaa tämän tilan.
konst toggleOpen = () => {
setopen (!avoin)
}
Voit nyt käyttää avointa arvoa dynaamisten CSS-luokkien luomiseen seuraavasti:
<div className={open? styles.sidenav: styles.sidenavClosed}>
<painike className={styles.menuBtn} onClick={toggleOpen}>
{avata? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map (kohde =>{
palata <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={open? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Käytetyt CSS-luokkien nimet määräytyvät avoimen tilan mukaan. Jos esimerkiksi open on tosi, ulkoisella div-elementillä on sidenav-luokan nimi. Muuten luokka sidenavClosed.
Sama koskee kuvaketta, joka muuttuu oikealle nuoleksi, kun suljet sivupalkin.
Muista tuoda se.
tuonti NäppäimistöDoubleArrowRightIcon alkaen '@mui/icons-material/KeyboardDoubleArrowRight';
Sivupalkin komponentti on nyt kokoontaitettava.
Nappaa koko koodi tästä GitHub-arkisto ja kokeile itse.
React-komponenttien muotoilu
React tekee kokoontaitettavan navigointikomponentin rakentamisesta yksinkertaista. Voit käyttää joitain Reactin tarjoamia työkaluja, kuten react-router-dom, käsitelläksesi reititystä ja koukkuja seurataksesi kutistunutta tilaa.
Voit myös käyttää CSS-moduuleja komponenttien tyyliin, vaikka sinun ei tarvitsekaan. Niiden avulla voit luoda paikallisesti suojattuja luokkia, jotka ovat ainutlaatuisia ja joita voit ravistaa nipputiedostoista, jos ne eivät ole käytössä.
