Ako vytvoriť skladateľnú navigačnú ponuku pomocou React

Navigačná ponuka bočného panela zvyčajne pozostáva zo zvislého zoznamu odkazov. Môžete vytvoriť sadu odkazov v React pomocou reakcie-router-dom.

Ak chcete vytvoriť bočnú navigačnú ponuku React s odkazmi obsahujúcimi ikony používateľského rozhrania materiálu, postupujte podľa týchto krokov. Odkazy vykreslia rôzne stránky, keď na ne kliknete.

Vytvorenie aplikácie React

Ak už máte a Reagovať projekt , pokojne preskočte na ďalší krok.

VYUŽITIE VIDEA DŇA

Ak chcete rýchlo spustiť aplikáciu React, môžete použiť príkaz create-react-app. Nainštaluje za vás všetky závislosti a konfiguráciu.

Spustite nasledujúci príkaz na vytvorenie projektu React s názvom React-sidenav.

npx create-react-app react-sidenav

Tým sa vytvorí priečinok reakčnej bočnej navigácie s niekoľkými súbormi, aby ste mohli začať. Ak chcete tento priečinok trochu vyčistiť, prejdite do priečinka src a nahraďte obsah súboru App.js týmto:

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

Navigačný komponent, ktorý vytvoríte, bude vyzerať takto:

Nezbalené zobrazenie navigačnej ponuky React

Je to celkom jednoduché, ale keď skončíte, mali by ste byť schopní upraviť ho tak, aby vyhovoval vašim potrebám. Navigačný komponent môžete zbaliť pomocou ikony dvojitej šípky v hornej časti:

Zbalené zobrazenie navigačnej ponuky React

Začnite vytvorením nezbaleného zobrazenia. Bočný panel obsahuje okrem ikony šípky aj zoznam položiek. Každá z týchto položiek má ikonu a nejaký text. Namiesto opakovaného vytvárania prvku pre každý prvok môžete údaje pre každú položku uložiť do poľa a potom cez ňu iterovať pomocou funkcie mapy.

Na ukážku vytvorte nový priečinok s názvom lib a pridajte nový súbor s názvom navData.js.

nabíja sa váš telefón v režime v lietadle rýchlejšie?

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

Ikony použité vyššie sú z knižnice Material UI, takže si ju najskôr nainštalujte pomocou tohto príkazu:

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

Ďalej vytvorte priečinok s názvom Komponenty a pridajte nový komponent s názvom Sidenav.js .

V tomto súbore importujte navData z ../lib a vytvorte kostru pre Sidenav funkcia:

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

Ak chcete vytvoriť prepojenia, upravte prvok div v tomto komponente na tento:

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

Tento komponent vytvorí navigačné prepojenie obsahujúce ikonu a text prepojenia pre každú iteráciu vo funkcii mapy.

Prvok tlačidla obsahuje ikonu šípky doľava z knižnice používateľského rozhrania Material. Importujte ho v hornej časti komponentu pomocou tohto kódu.

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

Možno ste si tiež všimli, že názvy tried odkazujú na objekt štýlov. Je to preto, že tento tutoriál používa moduly CSS. Moduly CSS vám umožňujú vytvárať v Reacte štýly s lokálnym rozsahom . Ak ste na spustenie tohto projektu použili aplikáciu create-react-app, nemusíte nič inštalovať ani konfigurovať.

zapnite dotykový displej Windows 10

V priečinku Components vytvorte nový súbor s názvom sidenav.module.css a pridajte nasledujúce:

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

Nastavenie smerovača React

Prvky div vrátené funkciou mapy by mali byť odkazy. V React môžete vytvárať prepojenia a trasy pomocou React-router-dom.

V termináli nainštalujte response-router-dom cez npm.

npm install react-router-dom@latest

Tento príkaz nainštaluje najnovšiu verziu Reag-router-dom.

V Index.js zabaľte komponent App do smerovača.

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

Potom v App.js pridajte svoje trasy.

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;

Upravte App.css pomocou týchto štýlov.

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

Každá trasa vráti inú stránku v závislosti od adresy URL odovzdanej do cestné rekvizity . Vytvorte nový priečinok s názvom Stránky a pridajte štyri komponenty – stránku Domov, Preskúmať, Štatistiky a Nastavenia. Tu je príklad:

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

Ak navštívite cestu /home, mali by ste vidieť 'Domov'.

Odkazy na bočnom paneli by mali po kliknutí viesť na zodpovedajúcu stránku. V Sidenav.js upravte funkciu mapy tak, aby namiesto prvku div používala komponent NavLink z response-router-dom.

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

Nezabudnite importovať NavLink v hornej časti súboru.

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

NavLink dostane URL cestu pre odkaz cez prop.

Až do tohto bodu je navigačná lišta otvorená. Aby sa dal zbaliť, môžete zmeniť jeho šírku zmenou triedy CSS, keď používateľ klikne na tlačidlo so šípkou. Potom môžete znova zmeniť triedu CSS a otvoriť ju.

Na dosiahnutie tejto funkcie prepínania potrebujete vedieť, kedy je bočný panel otvorený a zatvorený.

Na tento účel použite háčik useState. Toto Reagovať hák umožňuje pridávať a sledovať stav vo funkčnom komponente.

V sideNav.js vytvorte hák pre otvorený stav.

const [open, setopen] = useState(true)

Inicializujte stav otvorenia na hodnotu true, takže bočný panel bude vždy otvorený pri spustení aplikácie.

Ďalej vytvorte funkciu, ktorá bude tento stav prepínať.

Windows 10 zastaviť správu pamäte kódu

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

Teraz môžete použiť otvorenú hodnotu na vytváranie dynamických tried CSS, ako je táto:

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

Použité názvy tried CSS budú určené podľa stavu otvorenia. Napríklad, ak je open true, vonkajší prvok div bude mať názov triedy sidenav. V opačnom prípade bude trieda sidenavd.

To isté platí pre ikonu, ktorá sa po zatvorení bočného panela zmení na ikonu šípky doprava.

Nezabudnite ho importovať.

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

Komponent bočného panela je teraz zložiteľný.

Z tohto získajte úplný kód úložisko GitHub a skúste to sami.

Styling React Components

React zjednodušuje vytvorenie skladacieho navigačného komponentu. Môžete použiť niektoré z nástrojov, ktoré React poskytuje, ako napríklad response-router-dom na spracovanie smerovania a hákov na sledovanie zbaleného stavu.

Na štýlovanie komponentov môžete použiť aj moduly CSS, aj keď nemusíte. Použite ich na vytvorenie tried s lokálnym rozsahom, ktoré sú jedinečné a ktoré môžete vytriasť zo súborov balíka, ak sa nepoužívajú.

Ako vytvoriť skladateľnú navigačnú ponuku pomocou React

Vytvorenie aplikácie React

Vytvorenie navigačného komponentu

Nastavenie smerovača React

Úprava navigačných odkazov

Styling React Components