Home-theater-designers
Ένα μενού πλοήγησης στην πλαϊνή γραμμή αποτελείται συνήθως από μια κατακόρυφη λίστα συνδέσμων. Μπορείτε να δημιουργήσετε ένα σύνολο συνδέσμων στο React χρησιμοποιώντας το react-router-dom.
Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε ένα πλευρικό μενού πλοήγησης React με συνδέσμους που περιέχουν εικονίδια UI υλικού. Οι σύνδεσμοι θα αποδώσουν διαφορετικές σελίδες όταν κάνετε κλικ σε αυτές.
Δημιουργία εφαρμογής React
Εάν έχετε ήδη ένα React project , μη διστάσετε να μεταβείτε στο επόμενο βήμα.
ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ
Μπορείτε να χρησιμοποιήσετε την εντολή create-react-app για να ξεκινήσετε και να εκτελείτε γρήγορα το React. Εγκαθιστά όλες τις εξαρτήσεις και τις ρυθμίσεις παραμέτρων για εσάς.
Εκτελέστε την ακόλουθη εντολή για να δημιουργήσετε ένα έργο React που ονομάζεται react-sidenav.
npx create-react-app react-sidenav
Αυτό θα δημιουργήσει έναν φάκελο react-sidenav με ορισμένα αρχεία για να ξεκινήσετε. Για να καθαρίσετε λίγο αυτόν τον φάκελο, μεταβείτε στον φάκελο src και αντικαταστήστε τα περιεχόμενα του App.js με αυτό:
import './App.css';
function App() {
return (
<div className="App"></div>
);
}
export default App;Δημιουργία του στοιχείου πλοήγησης
Το στοιχείο πλοήγησης που θα δημιουργήσετε θα μοιάζει με αυτό:
Είναι αρκετά απλό, αλλά μόλις τελειώσετε, θα πρέπει να μπορείτε να το τροποποιήσετε ώστε να ταιριάζει στις ανάγκες σας. Μπορείτε να συμπτύξετε το στοιχείο πλοήγησης χρησιμοποιώντας το εικονίδιο διπλού βέλους στην κορυφή:
Ξεκινήστε δημιουργώντας τη μη συμπτυγμένη προβολή. Εκτός από το εικονίδιο βέλους, η πλαϊνή γραμμή περιέχει μια λίστα στοιχείων. Κάθε ένα από αυτά τα στοιχεία έχει ένα εικονίδιο και κάποιο κείμενο. Αντί να δημιουργείτε επαναλαμβανόμενα ένα στοιχείο για το καθένα, μπορείτε να αποθηκεύσετε τα δεδομένα για κάθε στοιχείο σε έναν πίνακα και στη συνέχεια να επαναλάβετε πάνω του χρησιμοποιώντας μια συνάρτηση χάρτη.
Για επίδειξη, δημιουργήστε έναν νέο φάκελο που ονομάζεται lib και προσθέστε ένα νέο αρχείο που ονομάζεται 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"
}
]
Τα εικονίδια που χρησιμοποιούνται παραπάνω προέρχονται από τη βιβλιοθήκη Material UI, επομένως εγκαταστήστε τα πρώτα χρησιμοποιώντας αυτήν την εντολή:
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
Στη συνέχεια, δημιουργήστε έναν φάκελο που ονομάζεται Συστατικά και προσθέστε ένα νέο στοιχείο που ονομάζεται Sidenav.js .
Σε αυτό το αρχείο, εισαγάγετε το navData από το ../lib και δημιουργήστε τον σκελετό για το Σιντενάβ λειτουργία:
// In Sidenav.js
import { navData } from "../lib/navData";
export default function Sidenav() {
return (
<div>
</div>
)
}
Για να δημιουργήσετε τους συνδέσμους, τροποποιήστε το στοιχείο div σε αυτό το στοιχείο σε αυτό:
<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>Αυτό το στοιχείο δημιουργεί έναν σύνδεσμο πλοήγησης που περιέχει το εικονίδιο και το κείμενο του συνδέσμου για κάθε επανάληψη στη λειτουργία χάρτη.
Το στοιχείο κουμπιού κρατά το εικονίδιο με το αριστερό βέλος από τη βιβλιοθήκη Material UI. Εισαγάγετε το στην κορυφή του στοιχείου χρησιμοποιώντας αυτόν τον κωδικό.
import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
Μπορεί επίσης να έχετε παρατηρήσει ότι τα ονόματα κλάσεων αναφέρονται σε ένα αντικείμενο στυλ. Αυτό συμβαίνει επειδή αυτό το σεμινάριο χρησιμοποιεί ενότητες CSS. Οι μονάδες CSS σάς επιτρέπουν να δημιουργείτε στυλ τοπικού εύρους στο React . Δεν χρειάζεται να εγκαταστήσετε ή να διαμορφώσετε τίποτα εάν χρησιμοποιήσατε το create-react-app για να ξεκινήσετε αυτό το έργο.
Στο φάκελο Components, δημιουργήστε ένα νέο αρχείο που ονομάζεται sidenav.module.css και προσθέστε τα εξής:
.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
Τα στοιχεία div που επιστρέφονται από τη συνάρτηση χάρτη πρέπει να είναι σύνδεσμοι. Στο React, μπορείτε να δημιουργήσετε συνδέσμους και διαδρομές χρησιμοποιώντας το react-router-dom.
Στο τερματικό, εγκαταστήστε το react-router-dom μέσω npm.
npm install react-router-dom@latest
Αυτή η εντολή εγκαθιστά την πιο πρόσφατη έκδοση του react-router-dom.
Στο Index.js, τυλίξτε το στοιχείο App με το Router.
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>
);
Στη συνέχεια, στο App.js, προσθέστε τις διαδρομές σας.
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;
Τροποποιήστε το App.css με αυτά τα στυλ.
Το μήνυμα+ θα ζητήσει τώρα άδεια
body {
margin: 0;
padding: 0;
}
.App {
display: flex;
}
main {
padding: 10px;
}
Κάθε διαδρομή επιστρέφει μια διαφορετική σελίδα ανάλογα με τη διεύθυνση URL που διαβιβάστηκε στο στηρίγματα μονοπατιών . Δημιουργήστε έναν νέο φάκελο που ονομάζεται Σελίδες και προσθέστε τέσσερα στοιχεία — τη σελίδα Αρχική σελίδα, Εξερεύνηση, Στατιστικά στοιχεία και Ρυθμίσεις. Εδώ είναι ένα παράδειγμα:
export default function Home() {
return (
<div>Home</div>
)
}
Εάν επισκεφτείτε τη διαδρομή /home, θα πρέπει να δείτε 'Home'.
Τροποποίηση συνδέσμων πλοήγησης
Οι σύνδεσμοι στην πλαϊνή γραμμή πρέπει να οδηγούν στην αντίστοιχη σελίδα όταν κάνετε κλικ σε αυτούς. Στο Sidenav.js, τροποποιήστε τη συνάρτηση χάρτη για να χρησιμοποιήσετε το στοιχείο NavLink από το react-router-dom αντί για το στοιχείο div.
{navData.map(item => {
return <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Θυμηθείτε να εισαγάγετε το NavLink στο επάνω μέρος του αρχείου.
import { NavLink } from "react-router-dom";
Το NavLink λαμβάνει τη διαδρομή URL για τη σύνδεση μέσω του στηρίγματος προς.
Μέχρι αυτό το σημείο, η γραμμή πλοήγησης είναι ανοιχτή. Για να το κάνετε πτυσσόμενο, μπορείτε να αλλάξετε το πλάτος του αλλάζοντας την κλάση CSS όταν ένας χρήστης κάνει κλικ στο κουμπί βέλους. Στη συνέχεια, μπορείτε να αλλάξετε ξανά την κλάση CSS για να την ανοίξετε.
Για να επιτύχετε αυτήν τη λειτουργία εναλλαγής, πρέπει να γνωρίζετε πότε η πλαϊνή γραμμή είναι ανοιχτή και κλειστή.
Για αυτό, χρησιμοποιήστε το άγκιστρο useState. Αυτό React hook σας επιτρέπει να προσθέτετε και να παρακολουθείτε την κατάσταση σε ένα λειτουργικό στοιχείο.
Στο sideNav.js, δημιουργήστε το άγκιστρο για την ανοιχτή κατάσταση.
const [open, setopen] = useState(true)
Αρχικοποιήστε την ανοιχτή κατάσταση σε true, ώστε η πλαϊνή γραμμή να είναι πάντα ανοιχτή όταν ξεκινάτε την εφαρμογή.
Στη συνέχεια, δημιουργήστε τη συνάρτηση που θα αλλάξει αυτήν την κατάσταση.
const toggleOpen = () => {
setopen(!open)
}
Τώρα μπορείτε να χρησιμοποιήσετε την ανοιχτή τιμή για να δημιουργήσετε δυναμικές κλάσεις CSS όπως αυτή:
<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>
Τα ονόματα κλάσεων CSS που χρησιμοποιούνται θα καθοριστούν από την ανοιχτή κατάσταση. Για παράδειγμα, εάν το open είναι true, το εξωτερικό στοιχείο div θα έχει όνομα κλάσης sidenav. Διαφορετικά, η τάξη θα είναι sidenavd.
Αυτό ισχύει για το εικονίδιο, το οποίο αλλάζει στο εικονίδιο με το δεξί βέλος όταν κλείνετε την πλαϊνή γραμμή.
Θυμηθείτε να το εισαγάγετε.
import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
Το στοιχείο πλαϊνής γραμμής είναι πλέον πτυσσόμενο.
Πάρτε τον πλήρη κωδικό από αυτό Αποθετήριο GitHub και δοκιμάστε το μόνοι σας.
Styling React Components
Το React καθιστά εύκολη τη δημιουργία ενός πτυσσόμενου στοιχείου πλοήγησης. Μπορείτε να χρησιμοποιήσετε μερικά από τα εργαλεία που παρέχει το React, όπως το react-router-dom για να χειριστείτε τη δρομολόγηση και τα hook για να παρακολουθείτε την κατάσταση κατάρρευσης.
Μπορείτε επίσης να χρησιμοποιήσετε μονάδες CSS για να δημιουργήσετε στυλ στοιχείων, αν και δεν χρειάζεται. Χρησιμοποιήστε τα για να δημιουργήσετε κλάσεις τοπικού εύρους που είναι μοναδικές και τις οποίες μπορείτε να ανακινήσετε από τα αρχεία του πακέτου εάν δεν χρησιμοποιούνται.