Taitettavan navigointivalikon luominen Reactilla

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.

PÄIVÄN VIDEON TEKEMINEN

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 create-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ä:

import './App.css'; 
  
function App() { 
  return ( 
    <div className="App"></div> 
  ); 
} 
  
export default App;

Luotava navigointikomponentti näyttää tältä:

React-navigointivalikon tiivistetty näkymä

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.

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" 
    } 
]

Yllä käytetyt kuvakkeet ovat Material UI -kirjastosta, joten asenna se ensin tällä komennolla:

npm install @mui/material @emotion/react @emotion/styled 
npm install @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:

// In Sidenav.js 
import { navData } from "../lib/navData"; 
export default function Sidenav() { 
  return ( 
    <div> 
    </div> 
  ) 
}

Luo linkit muokkaamalla tämän komponentin div-elementti seuraavasti:

<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>

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.

import KeyboardDoubleArrowLeftIcon from '@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 { 
    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-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@latest

Tämä komento asentaa react-router-domin uusimman version.

Kääri Index.js:n sovelluskomponentti reitittimeen.

mikä on funktio ohjelmoinnissa

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> 
);

Lisää seuraavaksi reitit App.js:ssä.

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;

Muokkaa App.css-tiedostoa näillä tyyleillä.

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 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:

export default function Home() { 
  return ( 
    <div>Home</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(item => { 
    return <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.

import { NavLink } from "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.

const [open, setopen] = useState(true)

Alusta avoimeksi tilaksi tosi, jotta sivupalkki on aina auki, kun käynnistät sovelluksen.

Luo seuraavaksi toiminto, joka vaihtaa tämän tilan.

const toggleOpen = () => { 
    setopen(!open) 
}

Voit nyt käyttää avointa arvoa dynaamisten CSS-luokkien luomiseen seuraavasti:

<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>

Käytetyt CSS-luokkien nimet määräytyvät avoimen tilan mukaan. Jos esimerkiksi open on tosi, ulkoisella div-elementillä on sidenav-luokan nimi. Muussa tapauksessa luokka on sidenavd.

Sama koskee kuvaketta, joka muuttuu oikealle nuoleksi, kun suljet sivupalkin.

Muista tuoda se.

import KeyboardDoubleArrowRightIcon from '@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ä.

Taitettavan navigointivalikon luominen Reactilla

React-sovelluksen luominen

Navigointikomponentin luominen

React-reitittimen määrittäminen

Navigointilinkkien muokkaaminen

React-komponenttien muotoilu