Menu nawigacyjne paska bocznego zazwyczaj składa się z pionowej listy linków. Możesz utworzyć zestaw linków w React za pomocą React-router-dom.
Wykonaj poniższe czynności, aby utworzyć boczne menu nawigacyjne React z łączami zawierającymi ikony interfejsu użytkownika materiałów. Po kliknięciu łącza będą renderować różne strony.
Tworzenie aplikacji React
Jeśli masz już Reaguj projekt, możesz przejść do następnego kroku.
Możesz użyć polecenia create-react-app, aby szybko rozpocząć pracę z Reactem. Instaluje dla Ciebie wszystkie zależności i konfigurację.
Uruchom następujące polecenie, aby utworzyć projekt React o nazwie React-sidenav.
npx Stwórz-react-app react-sidenav
Spowoduje to utworzenie folderu React-sidenav z kilkoma plikami, aby rozpocząć. Aby trochę wyczyścić ten folder, przejdź do folderu src i zastąp zawartość App.js następującym:
import './App.css';funkcjonowaćAplikacja() {
zwrócić (
<div className="Aplikacja"></div>
);
}
eksportdomyślna Aplikacja;
Tworzenie komponentu nawigacyjnego
Komponent nawigacyjny, który utworzysz, będzie wyglądał tak:
Jest to dość proste, ale kiedy skończysz, powinieneś być w stanie zmodyfikować go do swoich potrzeb. Możesz zwinąć komponent nawigacji, używając ikony podwójnej strzałki u góry:
Zacznij od utworzenia niezwiniętego widoku. Oprócz ikony strzałki pasek boczny zawiera listę elementów. Każdy z tych elementów ma ikonę i trochę tekstu. Zamiast powtarzać tworzenie elementu dla każdego elementu, możesz przechowywać dane dla każdego elementu w tablicy, a następnie iterować nad nim za pomocą funkcji mapowania.
Aby to zademonstrować, utwórz nowy folder o nazwie lib i dodaj nowy plik o nazwie navData.js.
import Strona głównaIkona z „@mui/icons-material/Home”;
import PodróżeOdkrywajIkona z „@mui/icons-material/TravelExplore”;
import IkonaWykresu Słupkowego z '@mui/icons-material/BarChart';
import Ikona ustawień z „@mui/icons-material/Ustawienia”;
eksportstały dane nawigacyjne = [
{
identyfikator: 0,
Ikona: <Strona głównaIkona/>,
tekst: "Dom",
połączyć: "/"
},
{
id: 1,
Ikona: <PodróżeEksplorujIkona/>,
tekst: "Badać",
połączyć: "badać"
},
{
id: 2,
Ikona: <Ikona wykresu słupkowego/>,
tekst: "Statystyka",
połączyć: "Statystyka"
},
{
id: 3,
Ikona: <Ikona ustawień/>,
tekst: "Ustawienia",
połączyć: "ustawienia"
}
]
Ikony użyte powyżej pochodzą z biblioteki Material UI, więc zainstaluj ją najpierw za pomocą tego polecenia:
instalacja npm @mui/material @emocja/react @emocja/styled
instalacja npm @mui/icons-material
Następnie utwórz folder o nazwie składniki i dodaj nowy komponent o nazwie Sidenav.js.
W tym pliku zaimportuj navData z ../lib i utwórz szkielet dla Sidenav funkcjonować:
// W Sidenav.js
import { dane nawigacyjne } z "../lib/navData";
eksportdomyślnafunkcjonowaćSidenav() {
zwrócić (
<div>
</div>
)
}
Aby utworzyć łącza, zmień element div w tym komponencie na:
<div>
<button className={styles.menuBtn}>
<KlawiaturaPodwójnaStrzałkaW LewoIkona />
</button>
{navData.map (pozycja =>{
zwrócić <div key={item.id} className={styles.sideitem}>
{pozycja.ikona}
<span className={styles.linkText}>{pozycja.tekst}</span>
</div>
})}
</div>Ten komponent tworzy łącze nawigacyjne zawierające ikonę i tekst łącza dla każdej iteracji funkcji mapy.
Element przycisku zawiera ikonę strzałki w lewo z biblioteki interfejsu użytkownika materiałów. Zaimportuj go u góry komponentu za pomocą tego kodu.
import Klawiatura Podwójna StrzałkaW Lewo z '@mui/icons-material/KeyboardDoubleArrowLeft';
Mogłeś również zauważyć, że nazwy klas odwołują się do obiektu stylów. Dzieje się tak, ponieważ ten samouczek używa modułów CSS. Moduły CSS umożliwiają tworzenie stylów o zasięgu lokalnym w React. Nie musisz niczego instalować ani konfigurować, jeśli używasz create-react-app do uruchomienia tego projektu.
W folderze Components utwórz nowy plik o nazwie sidenav.module.css i dodaj następujące:
.sidenav {
szerokość: 250px;
przemiana: szerokość 0.3swyluzować;
wysokość: 100vh;
kolor tła: rgb (10,25,41);
dopełnienie górnej części: 28px;
}.sidenavZamknięty {
komponuje: sidenav;
przemiana: szerokość 0.3swyluzować;
szerokość: 60px
}.pozycja poboczna {
wyświetlacz: elastyczny;
wyrównaj-elementy: centrum;
dopełnienie: 10px 20px;
kursor: wskaźnik;
kolor: #B2BAC2;
dekoracja tekstu: brak;
}.tekst linku {
dopełnienie lewe: 16px;
}.linkTextZamknięty {
komponuje: linkText;
widoczność: ukryta;
}.pozycja poboczna:unosić się {
kolor tła: #244f7d1c;
}
.menuBtn {
wyrównywać-samego siebie: środek;
wyrównaj-siebie: flex-początek;
justify-self: flex-koniec;
kolor: #B2BAC2;
kolor tła: przezroczysty;
granica: brak;
kursor: wskaźnik;
dopełnienie lewe: 20px;
}
Konfigurowanie routera React
Elementy div zwracane przez funkcję map powinny być linkami. W Reakcie możesz tworzyć łącza i trasy za pomocą React-router-dom.
W terminalu zainstaluj react-router-dom przez npm.
npm zainstaluj router-react-router-dom@najnowszy
To polecenie instaluje najnowszą wersję programu React-router-dom.
W Index.js opakuj komponent App z routerem.
import Reagować z 'reagować';
import ReactDOM z „reaguj-dom/klient”;
import Aplikacja z './Aplikacja';
import { BrowserRouter } z „react-router-dom”;
stały root = ReactDOM.createRoot(dokument.getElementById('root'));
źródło.renderowanie(
<Reagować. Tryb ścisły>
<PrzeglądarkaRouter>
<Aplikacja />
</BrowserRouter>
</React.StrictMode>
);
Następnie w App.js dodaj swoje trasy.
import {
PrzeglądarkaRouter,
Trasy,
Trasa,
} z "React-router-dom";import './App.css';
import Sidenav z './Komponenty/Sidenav';
import Badać z "./Strony/Eksploruj";
import Dom z "./Strony/Strona główna";
import Ustawienia z "./Strony/Ustawienia";
import Statystyka z "./Strony/Statystyki";
funkcjonowaćAplikacja() {
zwrócić (
<div className="Aplikacja">
<Sidenav/>
<Główny>
<Trasy>
<Ścieżka trasy="/" element={<Dom />}/>
<Ścieżka trasy="/explore" element={<Badać />} />
<Ścieżka trasy="/statistics" element={<Statystyka />}/>
<Ścieżka trasy="/settings" element={<Ustawienia />} />
</Routes>
</main>
</div>
);
}
eksportdomyślna Aplikacja;
Zmodyfikuj App.css za pomocą tych stylów.
ciało {
margines: 0;
wypełnienie: 0;
}.Aplikacja {
wyświetlacz: elastyczny;
}
Główny {
wypełnienie: 10px;
}
Każda trasa zwraca inną stronę w zależności od adresu URL przekazanego do rekwizyty ścieżki. Utwórz nowy folder o nazwie Strony i dodaj cztery składniki — Strona główna, Eksploruj, Statystyki i Ustawienia. Oto przykład:
eksportdomyślnafunkcjonowaćDom() {
zwrócić (
<div>Dom</div>
)
}
Jeśli odwiedzasz ścieżkę /home, powinieneś zobaczyć "Dom".
Po kliknięciu łącza na pasku bocznym powinny prowadzić do pasującej strony. W Sidenav.js zmodyfikuj funkcję mapy tak, aby używała komponentu NavLink z React-router-dom zamiast elementu div.
{navData.map (pozycja => {
zwrócić <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{pozycja.ikona}
<span className={styles.linkText}>{pozycja.tekst}</span>
</NavLink>
})}
Pamiętaj, aby zaimportować NavLink na górze pliku.
import { Łącze nawigacyjne } z „react-router-dom”;
NavLink otrzymuje ścieżkę URL dla łącza za pośrednictwem to prop.
Do tego momentu pasek nawigacyjny jest otwarty. Aby był zwijany, możesz przełączać jego szerokość, zmieniając klasę CSS, gdy użytkownik kliknie przycisk strzałki. Następnie możesz ponownie zmienić klasę CSS, aby ją otworzyć.
Aby osiągnąć tę funkcję przełączania, musisz wiedzieć, kiedy pasek boczny jest otwarty, a kiedy zamknięty.
W tym celu użyj haka useState. Ten Reaguj hak umożliwia dodawanie i śledzenie stanu w funkcjonalnym komponencie.
W sideNav.js utwórz zaczep dla stanu otwartego.
stały [open, setopen] = useState(PRAWDA)
Zainicjuj stan otwarty na true, aby pasek boczny był zawsze otwarty po uruchomieniu aplikacji.
Następnie utwórz funkcję, która będzie przełączać ten stan.
stały toggleOpen = () => {
otwórz (! otwórz)
}
Możesz teraz użyć wartości open do tworzenia dynamicznych klas CSS w następujący sposób:
<div className={open? styles.sidenav: styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{otwarty? <KlawiaturaPodwójnaStrzałkaW LewoIkona />: <KlawiaturaPodwójnaStrzałkaPrawaIkona />}
</button>
{navData.map (pozycja =>{
zwrócić <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{pozycja.ikona}
<span className={otwarty? styles.linkText: styles.linkTextClosed}>{pozycja.tekst}</span>
</NavLink>
})}
</div>
Używane nazwy klas CSS będą określone przez stan otwarty. Na przykład, jeśli open ma wartość true, zewnętrzny element div będzie miał nazwę klasy sidenav. W przeciwnym razie klasa zostanie sidenavClosed.
To samo dotyczy ikony, która po zamknięciu paska bocznego zmienia się w ikonę strzałki w prawo.
Pamiętaj, aby go zaimportować.
import KlawiaturaPodwójna StrzałkaPrawaIkona z '@mui/icons-material/KeyboardDoubleArrowRight';
Komponent paska bocznego jest teraz zwijany.
Pobierz cały kod z tego Repozytorium GitHub i spróbuj sam.
Stylizacja komponentów React
React ułatwia budowanie zwijanego komponentu nawigacyjnego. Możesz użyć niektórych narzędzi, które zapewnia React, takich jak reakcja-router-dom do obsługi routingu i hooków do śledzenia stanu zwiniętego.
Możesz także użyć modułów CSS do stylizacji komponentów, chociaż nie musisz. Użyj ich do tworzenia klas o zasięgu lokalnym, które są unikatowe i które można wyrzucić z plików pakunków, jeśli nie są używane.