Kā izveidot saliekamu navigācijas izvēlni, izmantojot React

Sānjoslas navigācijas izvēlne parasti sastāv no vertikāla saišu saraksta. Varat izveidot saišu kopu programmā React, izmantojot react-router-dom.

Veiciet šīs darbības, lai izveidotu React sānu navigācijas izvēlni ar saitēm, kas satur materiāla lietotāja interfeisa ikonas. Saites atveidos dažādas lapas, kad uz tām noklikšķināsit.

React lietojumprogrammas izveide

Ja jums jau ir a Reaģēt projekts , nekautrējieties pāriet uz nākamo darbību.

DIENAS VIDEO MAKEUSEOF

Varat izmantot komandu Create-react-app, lai ātri sāktu darbu ar React. Tas instalē visas atkarības un konfigurāciju jūsu vietā.

Palaidiet šo komandu, lai izveidotu React projektu ar nosaukumu react-sidenav.

npx create-react-app react-sidenav

Tādējādi tiks izveidota mape react-sidenav ar dažiem failiem, lai sāktu darbu. Lai mazliet iztīrītu šo mapi, dodieties uz mapi src un aizstājiet App.js saturu ar šo:

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

Izveidotais navigācijas komponents izskatīsies šādi:

Nav sakļauts navigācijas izvēlnes React skats

Tas ir diezgan vienkārši, taču, kad esat pabeidzis, jums vajadzētu būt iespējai to pārveidot atbilstoši savām vajadzībām. Varat sakļaut navigācijas komponentu, izmantojot dubultās bultiņas ikonu augšpusē:

Sakļauts navigācijas izvēlnes React skats

Sāciet, izveidojot nesakļautu skatu. Sānjoslā ir ne tikai bultiņas ikona, bet arī vienumu saraksts. Katram no šiem vienumiem ir ikona un teksts. Tā vietā, lai atkārtoti izveidotu katram elementu, varat saglabāt katra vienuma datus masīvā un pēc tam to atkārtot, izmantojot kartes funkciju.

kā atbloķēt cieto disku mac

Lai demonstrētu, izveidojiet jaunu mapi ar nosaukumu lib un pievienojiet jaunu failu ar nosaukumu 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" 
    } 
]

Iepriekš izmantotās ikonas ir no Material UI bibliotēkas, tāpēc vispirms instalējiet to, izmantojot šo komandu:

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

Pēc tam izveidojiet mapi ar nosaukumu Sastāvdaļas un pievienojiet jaunu komponentu ar nosaukumu Sidenav.js .

Šajā failā importējiet navData no ../lib un izveidojiet skeletu Sidenav funkcija:

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

Lai izveidotu saites, modificējiet div elementu šajā komponentā uz šo:

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

Šis komponents izveido navigācijas saiti, kas satur ikonu un saites tekstu katrai iterācijai kartes funkcijā.

Pogas elements satur kreisās bultiņas ikonu no Materiāla lietotāja interfeisa bibliotēkas. Importējiet to komponenta augšdaļā, izmantojot šo kodu.

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

Jūs, iespējams, arī pamanījāt, ka klašu nosaukumi atsaucas uz stilu objektu. Tas ir tāpēc, ka šajā apmācībā tiek izmantoti CSS moduļi. CSS moduļi ļauj programmā React izveidot lokāli aptvertus stilus . Jums nekas nav jāinstalē vai jākonfigurē, ja šī projekta sākšanai izmantojāt lietotni Create-react-app.

Mapē Komponenti izveidojiet jaunu failu ar nosaukumu sidenav.module.css un pievienojiet sekojošo:

.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 maršrutētāja iestatīšana

Kartes funkcijas atgrieztajiem div elementiem jābūt saitēm. Programmā React varat izveidot saites un maršrutus, izmantojot react-router-dom.

Terminālī instalējiet react-router-dom, izmantojot npm.

npm install react-router-dom@latest

Šī komanda instalē jaunāko react-router-dom versiju.

Programmā Index.js aptiniet lietotnes komponentu ar maršrutētāju.

Google Play veikals neatjauninās lietotnes

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

Pēc tam programmā App.js pievienojiet savus maršrutus.

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;

Modificējiet App.css ar šiem stiliem.

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

Katrs maršruts atgriež citu lapu atkarībā no URL, kas tiek nosūtīts ceļa rekvizīti . Izveidojiet jaunu mapi ar nosaukumu Lapas un pievienojiet četrus komponentus — lapu Sākums, Izpētīt, Statistika un Iestatījumi. Šeit ir piemērs:

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

Ja apmeklējat /home ceļu, jums vajadzētu redzēt 'Home'.

Noklikšķinot uz sānjoslas saitēm, jānovirza uz atbilstošo lapu. Vietnē Sidenav.js modificējiet kartes funkciju, lai div elementa vietā izmantotu NavLink komponentu no react-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> 
})}

Neaizmirstiet importēt NavLink faila augšdaļā.

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

NavLink saņem saites URL ceļu, izmantojot to prop.

Līdz šim brīdim navigācijas josla ir atvērta. Lai padarītu to saliekamu, varat pārslēgt tā platumu, mainot CSS klasi, kad lietotājs noklikšķina uz bultiņas pogas. Pēc tam varat vēlreiz mainīt CSS klasi, lai to atvērtu.

kā Wordā ievietot joslu

Lai sasniegtu šo pārslēgšanas funkcionalitāti, jums jāzina, kad sānjosla ir atvērta un aizvērta.

Šim nolūkam izmantojiet āķi useState. Šis Reakcijas āķis ļauj pievienot un izsekot stāvokli funkcionālajā komponentā.

Vietnē sideNav.js izveidojiet atvērtā stāvokļa āķi.

const [open, setopen] = useState(true)

Inicializējiet atvērto stāvokli uz True, lai sānjosla vienmēr būtu atvērta, kad startēsiet lietojumprogrammu.

Pēc tam izveidojiet funkciju, kas pārslēgs šo stāvokli.

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

Tagad varat izmantot atvērto vērtību, lai izveidotu dinamiskas CSS klases, piemēram:

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

Izmantotos CSS klašu nosaukumus noteiks atvērtais stāvoklis. Piemēram, ja open ir patiess, ārējam div elementam būs sidenav klases nosaukums. Pretējā gadījumā klase būs sidenavd.

Tas pats attiecas uz ikonu, kas, aizverot sānjoslu, mainās uz labās bultiņas ikonu.

Atcerieties to importēt.

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

Sānjoslas komponents tagad ir saliekams.

Satveriet visu kodu no šī GitHub repozitorijs un izmēģiniet to pats.

Styling React komponenti

React ļauj vienkārši izveidot saliekamu navigācijas komponentu. Varat izmantot dažus no React nodrošinātajiem rīkiem, piemēram, react-router-dom, lai apstrādātu maršrutēšanu, un āķus, lai izsekotu sakļautajam stāvoklim.

Varat arī izmantot CSS moduļus, lai veidotu komponentus, lai gan jums tas nav jādara. Izmantojiet tos, lai izveidotu lokālas klases, kas ir unikālas un kuras varat izkratīt no komplekta failiem, ja tās netiek izmantotas.

Kā izveidot saliekamu navigācijas izvēlni, izmantojot React

React lietojumprogrammas izveide

Navigācijas komponenta izveide

React maršrutētāja iestatīšana

Navigācijas saišu modificēšana

Styling React komponenti