Kako stvoriti sklopivi navigacijski izbornik koristeći React

Navigacijski izbornik bočne trake obično se sastoji od okomitog popisa veza. Možete stvoriti skup poveznica u Reactu koristeći react-router-dom.

Slijedite ove korake za izradu React bočnog navigacijskog izbornika s vezama koje sadrže materijalne ikone korisničkog sučelja. Veze će prikazati različite stranice kada ih kliknete.

Izrada React aplikacije

Ako već imate a Projekt React , slobodno prijeđite na sljedeći korak.

MAKEUSEOF VIDEO DANA

Možete upotrijebiti naredbu create-react-app kako biste brzo pokrenuli React. Instalira sve ovisnosti i konfiguraciju umjesto vas.

Pokrenite sljedeću naredbu za stvaranje React projekta pod nazivom react-sidenav.

npx create-react-app react-sidenav

Ovo će stvoriti mapu react-sidenav s nekim datotekama za početak. Da biste malo očistili ovu mapu, idite do mape src i zamijenite sadržaj App.js s ovim:

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

Navigacijska komponenta koju ćete izraditi izgledat će ovako:

Nesažeti prikaz React navigacijskog izbornika

Prilično je jednostavan, ali kada završite, trebali biste ga moći modificirati kako bi odgovarao vašim potrebama. Navigacijsku komponentu možete sažeti pomoću ikone dvostruke strelice na vrhu:

Sažeti prikaz React navigacijskog izbornika

Započnite stvaranjem nesažetog prikaza. Osim ikone strelice, bočna traka sadrži popis stavki. Svaka od ovih stavki ima ikonu i tekst. Umjesto ponavljajućeg stvaranja elementa za svaki, možete pohraniti podatke za svaku stavku u nizu i zatim ga ponavljati pomoću funkcije karte.

Za demonstraciju, stvorite novu mapu pod nazivom lib i dodajte novu datoteku pod nazivom 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" 
    } 
]

Gore korištene ikone su iz biblioteke Material UI, pa je prvo instalirajte pomoću ove naredbe:

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material

Zatim stvorite mapu pod nazivom Komponente i dodati novu komponentu tzv Sidenav.js .

U ovu datoteku uvezite navData iz ../lib i stvorite kostur za Sidenav funkcija:

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

Da biste stvorili veze, izmijenite element div u ovoj komponenti na ovo:

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

Ova komponenta stvara navigacijsku vezu koja sadrži ikonu i tekst veze za svaku iteraciju u funkciji karte.

Element gumba sadrži ikonu strelice lijevo iz biblioteke korisničkog sučelja materijala. Uvezite ga na vrh komponente pomoću ovog koda.

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';

Možda ste također primijetili da nazivi klasa referenciraju objekt stilova. To je zato što ovaj vodič koristi CSS module. CSS moduli vam omogućuju stvaranje lokalno ograničenih stilova u Reactu . Ne morate ništa instalirati ili konfigurirati ako ste koristili create-react-app za pokretanje ovog projekta.

kako saznati tko vas je prestao pratiti na instagramu

U mapi Components kreirajte novu datoteku pod nazivom sidenav.module.css i dodajte sljedeće:

.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; 
}

Postavljanje React usmjerivača

Elementi div koje vraća funkcija karte trebaju biti veze. U Reactu možete kreirati veze i rute pomoću react-router-dom.

U terminalu instalirajte react-router-dom putem npm-a.

npm install react-router-dom@latest

Ova naredba instalira najnoviju verziju react-router-dom.

U Index.js, omotajte App komponentu s Routerom.

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

Zatim u App.js dodajte svoje rute.

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;

Izmijenite App.css ovim stilovima.

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 10px; 
}

Svaka ruta vraća drugu stranicu ovisno o URL-u proslijeđenom na rekviziti staze . Napravite novu mapu pod nazivom Stranice i dodajte četiri komponente — stranicu Početna, Istraživanje, Statistika i Postavke. Evo primjera:

export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
}

Ako posjetite putanju /home, trebali biste vidjeti 'Home'.

Veze na bočnoj traci trebale bi voditi do odgovarajuće stranice kada ih kliknete. U Sidenav.js, modificirajte funkciju karte da upotrebljava komponentu NavLink iz react-router-dom umjesto elementa div.

{navData.map(item => { 
    return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
               {item.icon} 
               <span className={styles.linkText}>{item.text}</span> 
           </NavLink> 
})}

Ne zaboravite uvesti NavLink na vrhu datoteke.

import { NavLink } from "react-router-dom";

NavLink prima URL stazu za vezu kroz to prop.

Do ove točke navigacijska traka je otvorena. Da biste ga učinili sklopivim, možete promijeniti njegovu širinu promjenom CSS klase kada korisnik klikne gumb sa strelicom. Zatim možete ponovno promijeniti CSS klasu da biste je otvorili.

Da biste postigli ovu funkciju prebacivanja, morate znati kada je bočna traka otvorena i zatvorena.

U tu svrhu upotrijebite kuku useState. Ovaj Reagirajte kuku omogućuje vam dodavanje i praćenje stanja u funkcionalnoj komponenti.

U sideNav.js stvorite kuku za otvoreno stanje.

const [open, setopen] = useState(true)

Inicijalizirajte otvoreno stanje na istinito, tako da će bočna traka uvijek biti otvorena kada pokrenete aplikaciju.

Zatim stvorite funkciju koja će mijenjati ovo stanje.

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

Sada možete koristiti otvorenu vrijednost za stvaranje dinamičkih CSS klasa poput ove:

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

Korištena imena CSS klasa bit će određena otvorenim stanjem. Na primjer, ako je open istinito, vanjski element div imat će ime klase sidenav. U suprotnom, klasa će biti sidenavd.

To je isto za ikonu, koja se mijenja u ikonu strelice desno kada zatvorite bočnu traku.

Ne zaboravite ga uvesti.

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';

Komponenta bočne trake sada se može sklopiti.

Uzmite cijeli kod iz ovoga GitHub spremište i pokušajte sami.

zašto mi zvučnici ne rade

Styling React komponente

React olakšava izradu sklopive navigacijske komponente. Možete koristiti neke od alata koje React nudi kao što je react-router-dom za rukovanje usmjeravanjem i zakačke za praćenje kolapsiranog stanja.

Također možete koristiti CSS module za stiliziranje komponenti, iako ne morate. Upotrijebite ih za stvaranje klasa s lokalnim opsegom koje su jedinstvene i koje možete otresti iz datoteka paketa ako nisu u upotrebi.

Kako stvoriti sklopivi navigacijski izbornik koristeći React

Izrada React aplikacije

Stvaranje navigacijske komponente

Postavljanje React usmjerivača

Izmjena navigacijskih veza

Styling React komponente