Jak vytvořit skládací navigační nabídku pomocí React

Navigační nabídka postranního panelu se obvykle skládá ze svislého seznamu odkazů. V Reactu můžete vytvořit sadu odkazů pomocí React-router-dom.

Chcete-li vytvořit boční navigační nabídku React s odkazy obsahujícími ikony uživatelského rozhraní materiálu, postupujte podle těchto kroků. Odkazy vykreslí různé stránky, když na ně kliknete.

Vytvoření aplikace React

Pokud již máte a Reagovat projekt , klidně přeskočte na další krok.

VYUŽITÍ VIDEA DNE

Pomocí příkazu create-react-app můžete rychle spustit aplikaci React. Nainstaluje za vás všechny závislosti a konfiguraci.

Spusťte následující příkaz a vytvořte projekt React s názvem respond-sidenav.

npx create-react-app react-sidenav

Tím se vytvoří složka reakce-sidenav s některými soubory, abyste mohli začít. Chcete-li tuto složku trochu vyčistit, přejděte do složky src a nahraďte obsah App.js tímto:

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

Navigační komponenta, kterou vytvoříte, bude vypadat takto:

Nesbalené zobrazení navigační nabídky React

Je to docela jednoduché, ale jakmile skončíte, měli byste být schopni upravit jej tak, aby vyhovoval vašim potřebám. Navigační komponentu můžete sbalit pomocí ikony dvojité šipky v horní části:

Sbalený pohled na navigační nabídku React

Začněte vytvořením nesbaleného pohledu. Kromě ikony šipky obsahuje postranní panel seznam položek. Každá z těchto položek má ikonu a nějaký text. Namísto opakovaného vytváření prvku pro každý z nich můžete data pro každou položku uložit do pole a poté je iterovat pomocí funkce mapy.

Pro ukázku vytvořte novou složku s názvem lib a přidejte nový soubor s názvem 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" 
    } 
]

Ikony použité výše jsou z knihovny Material UI, takže ji nejprve nainstalujte pomocí tohoto příkazu:

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

Dále vytvořte složku s názvem Komponenty a přidejte novou komponentu s názvem Sidenav.js .

V tomto souboru importujte navData z ../lib a vytvořte kostru pro Sidenav funkce:

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

Chcete-li vytvořit odkazy, upravte prvek div v této komponentě na toto:

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

Tato komponenta vytvoří navigační odkaz obsahující ikonu a text odkazu pro každou iteraci ve funkci mapy.

Prvek tlačítka obsahuje ikonu šipky doleva z knihovny uživatelského rozhraní Material. Importujte jej v horní části komponenty pomocí tohoto kódu.

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

Možná jste si také všimli, že názvy tříd odkazují na objekt styles. Je to proto, že tento tutoriál používá moduly CSS. Moduly CSS vám umožňují vytvářet styly s místním rozsahem v Reactu . Pokud jste ke spuštění tohoto projektu použili aplikaci create-react-app, nemusíte nic instalovat ani konfigurovat.

o kolik se vaše snap skóre zvýší

Ve složce Components vytvořte nový soubor s názvem sidenav.module.css a přidejte následující:

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

Nastavení routeru React

Prvky div vrácené funkcí mapy by měly být odkazy. V Reactu můžete vytvářet odkazy a trasy pomocí React-router-dom.

V terminálu nainstalujte response-router-dom přes npm.

npm install react-router-dom@latest

Tento příkaz nainstaluje nejnovější verzi respond-router-dom.

V Index.js zabalte komponentu App do směrovače.

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

Dále do App.js přidejte své 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 pomocí těchto stylů.

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

Každá trasa vrací jinou stránku v závislosti na URL předané do rekvizity cesty . Vytvořte novou složku s názvem Stránky a přidejte čtyři součásti – stránku Domů, Prozkoumat, Statistiky a Nastavení. Zde je příklad:

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

Pokud navštívíte cestu /home, měli byste vidět 'Home'.

jak získat internet tam, kde není žádná služba

Odkazy v postranním panelu by po kliknutí měly vést na odpovídající stránku. V Sidenav.js upravte funkci mapy tak, aby místo prvku div používala komponentu NavLink z respond-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> 
})}

Nezapomeňte importovat NavLink v horní části souboru.

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

NavLink obdrží URL cestu pro odkaz přes prop.

Do této chvíle je navigační lišta otevřená. Aby byl sbalitelný, můžete přepnout jeho šířku změnou třídy CSS, když uživatel klikne na tlačítko se šipkou. Poté můžete znovu změnit třídu CSS a otevřít ji.

Chcete-li dosáhnout této funkce přepínání, musíte vědět, kdy je postranní panel otevřený a zavřený.

K tomu použijte háček useState. Tento Reagovat háček umožňuje přidat a sledovat stav ve funkční komponentě.

V sideNav.js vytvořte hák pro otevřený stav.

const [open, setopen] = useState(true)

Inicializujte stav otevření na hodnotu true, takže postranní panel bude při spuštění aplikace vždy otevřený.

Dále vytvořte funkci, která bude tento stav přepínat.

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

Nyní můžete použít hodnotu open k vytvoření dynamických tříd CSS, jako je tato:

<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 tříd CSS budou určeny stavem otevření. Pokud je například open true, vnější prvek div bude mít název třídy sidenav. Jinak bude třída sidenavd.

Totéž platí pro ikonu, která se po zavření bočního panelu změní na ikonu šipky vpravo.

Nezapomeňte jej importovat.

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

Komponenta postranního panelu je nyní skládací.

Získejte kompletní kód z tohoto úložiště GitHub a zkuste to sami.

Styling React Components

React usnadňuje vytvoření skládací navigační komponenty. Můžete použít některé z nástrojů, které React poskytuje, jako je response-router-dom ke zpracování směrování a háčků ke sledování sbaleného stavu.

Ke stylování komponent můžete také použít moduly CSS, i když nemusíte. Použijte je k vytvoření tříd s místním rozsahem, které jsou jedinečné a které můžete setřást ze souborů svazku, pokud se nepoužívají.

Jak vytvořit skládací navigační nabídku pomocí React

Vytvoření aplikace React

Vytvoření navigační komponenty

Nastavení routeru React

Úprava navigačních odkazů

Styling React Components