Kaip sukurti sulankstomą naršymo meniu naudojant „React“.

Šoninės juostos naršymo meniu paprastai sudaro vertikalus nuorodų sąrašas. „React“ galite sukurti nuorodų rinkinį naudodami „react-router-dom“.

Atlikite šiuos veiksmus, kad sukurtumėte šoninį „React“ naršymo meniu su nuorodomis su svarbiomis vartotojo sąsajos piktogramomis. Kai jas spustelėsite, nuorodos pateiks skirtingus puslapius.

„React“ programos kūrimas

Jei jau turite a Reaguoti projektą , nedvejodami pereikite prie kito veiksmo.

DIENOS VAIZDO ĮRAŠO PAGALBA

Galite naudoti komandą kurti-reaguoti-programą, kad greitai pradėtumėte ir paleistumėte React. Jis įdiegia visas priklausomybes ir konfigūraciją už jus.

Vykdykite šią komandą, kad sukurtumėte React projektą, vadinamą react-sidenav.

npx create-react-app react-sidenav

Tai sukurs react-sidenav aplanką su kai kuriais failais, kad galėtumėte pradėti. Norėdami šiek tiek išvalyti šį aplanką, eikite į src aplanką ir pakeiskite App.js turinį šiuo:

kaip prijungti „alexa“ prie „wifi“ be programos

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

Naršymo komponentas, kurį sukursite, atrodys taip:

Nesutrauktas „React“ naršymo meniu vaizdas

Tai gana paprasta, bet kai baigsite, turėtumėte galėti jį modifikuoti, kad atitiktų jūsų poreikius. Naršymo komponentą galite sutraukti naudodami dvigubos rodyklės piktogramą viršuje:

Sutrauktas naršymo meniu „React“ vaizdas

Pradėkite kurdami nesutrauktą rodinį. Be rodyklės piktogramos, šoninėje juostoje yra elementų sąrašas. Kiekvienas iš šių elementų turi piktogramą ir tekstą. Užuot nuolat kūrę elementą kiekvienam elementui, galite saugoti kiekvieno elemento duomenis masyve ir kartoti jį naudodami žemėlapio funkciją.

Norėdami parodyti, sukurkite naują aplanką pavadinimu lib ir pridėkite naują failą pavadinimu 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" 
    } 
]

Aukščiau naudojamos piktogramos yra iš Material UI bibliotekos, todėl pirmiausia įdiekite ją naudodami šią komandą:

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

Tada sukurkite aplanką pavadinimu Komponentai ir pridėkite naują komponentą pavadinimu Sidenav.js .

Šiame faile importuokite navData iš ../lib ir sukurkite skeletą Sidenavas funkcija:

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

Norėdami sukurti nuorodas, pakeiskite elementą div į šį komponentą:

<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 komponentas sukuria navigacijos nuorodą, kurioje yra piktograma ir nuorodos tekstas kiekvienai žemėlapio funkcijos iteracijai.

Mygtuko elemente yra kairiosios rodyklės piktograma iš medžiagos vartotojo sąsajos bibliotekos. Importuokite jį komponento viršuje naudodami šį kodą.

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

Galbūt pastebėjote, kad klasių pavadinimai nurodo stilių objektą. Taip yra todėl, kad šioje pamokoje naudojami CSS moduliai. CSS moduliai leidžia kurti vietinės apimties stilius React . Jums nieko nereikia diegti ar konfigūruoti, jei šiam projektui pradėti naudojote „create-react-app“.

Aplanke Komponentai sukurkite naują failą pavadinimu sidenav.module.css ir pridėkite:

.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šrutizatoriaus nustatymas

Žemėlapio funkcijos grąžinami div elementai turėtų būti nuorodos. Programoje „React“ galite kurti nuorodas ir maršrutus naudodami „react-router-dom“.

Terminale įdiekite react-router-dom per npm.

npm install react-router-dom@latest

Ši komanda įdiegia naujausią react-router-dom versiją.

Programoje Index.js apvyniokite programos komponentą su maršruto parinktuvu.

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

Tada programoje App.js pridėkite savo 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;

Modifikuokite App.css naudodami šiuos stilius.

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

Kiekvienas maršrutas grąžina skirtingą puslapį, priklausomai nuo URL, perduoto kelio rekvizitai . Sukurkite naują aplanką pavadinimu „Puslapiai“ ir pridėkite keturis komponentus – puslapį „Pagrindinis“, „Naršyti“, „Statistika“ ir „Nustatymai“. Štai pavyzdys:

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

Jei lankotės /home kelyje, turėtumėte pamatyti „Home“.

Šoninėje juostoje esančios nuorodos turėtų nukreipti į atitinkamą puslapį, kai jas spustelėsite. Sidenav.js modifikuokite žemėlapio funkciją, kad vietoj div elemento būtų naudojamas NavLink komponentas iš 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> 
})}

Nepamirškite importuoti „NavLink“ failo viršuje.

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

„NavLink“ gauna nuorodos URL kelią per „to prop“.

Iki šiol naršymo juosta atidaryta. Kad jį būtų galima sutraukti, galite perjungti jo plotį pakeisdami CSS klasę, kai vartotojas spustelėja rodyklės mygtuką. Tada galite dar kartą pakeisti CSS klasę, kad ją atidarytumėte.

Norėdami pasiekti šią perjungimo funkciją, turite žinoti, kada šoninė juosta yra atidaryta ir uždaryta.

Tam naudokite „useState“ kabliuką. Tai Reagavimo kabliukas leidžia pridėti ir sekti funkcinio komponento būseną.

SideNav.js sukurkite atviros būsenos kabliuką.

const [open, setopen] = useState(true)

Inicijuokite atvirą būseną į „true“, todėl šoninė juosta visada bus atidaryta, kai paleisite programą.

Tada sukurkite funkciją, kuri perjungs šią būseną.

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

Dabar galite naudoti atvirąją vertę, kad sukurtumėte tokias dinamines CSS klases:

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

Naudojami CSS klasių pavadinimai bus nustatyti pagal atvirą būseną. Pavyzdžiui, jei atvira yra tiesa, išorinis div elementas turės sidenav klasės pavadinimą. Priešingu atveju klasė bus sidenavd.

Tas pats pasakytina ir apie piktogramą, kuri pasikeičia į dešinės rodyklės piktogramą, kai uždarote šoninę juostą.

Nepamirškite jo importuoti.

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

Dabar šoninės juostos komponentas yra sulankstomas.

Iš čia paimkite visą kodą GitHub saugykla ir pabandykite patys.

React komponentų stilius

„React“ leidžia nesudėtingai sukurti sulankstomą navigacijos komponentą. Galite naudoti kai kuriuos „React“ teikiamus įrankius, pvz., „react-router-dom“, kad tvarkytumėte maršrutą, ir „kablius“, kad stebėtumėte sutraukimo būseną.

Taip pat galite naudoti CSS modulius, kad sukurtumėte komponentų stilių, nors jums to nereikia. Naudokite juos kurdami vietines klases, kurios yra unikalios ir kurias galite pašalinti iš paketų failų, jei jie nenaudojami.

Kaip sukurti sulankstomą naršymo meniu naudojant „React“.

„React“ programos kūrimas

Navigacijos komponento kūrimas

React maršrutizatoriaus nustatymas

Navigacijos nuorodų keitimas

React komponentų stilius