כיצד ליצור תפריט ניווט מתקפל באמצעות React

תפריט ניווט בסרגל צד מורכב בדרך כלל מרשימה אנכית של קישורים. אתה יכול ליצור קבוצה של קישורים ב-React באמצעות react-router-dom.

בצע את השלבים הבאים כדי ליצור תפריט ניווט בצד React עם קישורים המכילים סמלי ממשק משתמש מהותיים. הקישורים יעבדו דפים שונים כאשר תלחץ עליהם.

---

---

יצירת אפליקציית React

אם כבר יש לך א פרויקט תגובה , אל תהסס לדלג לשלב הבא.

איפור של סרטון היום

אתה יכול להשתמש בפקודה 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.

כיצד להתקין osx מ- usb

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" 
    } 
] 

הסמלים שבהם נעשה שימוש למעלה הם מספריית ממשק המשתמש של החומר, אז התקן אותו תחילה באמצעות הפקודה הזו:

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>

רכיב זה יוצר קישור ניווט המכיל את הסמל ואת טקסט הקישור עבור כל איטרציה בפונקציית המפה.

רכיב הלחצן מחזיק את סמל החץ שמאלה מספריית ממשק המשתמש של החומר. ייבא אותו בחלק העליון של הרכיב באמצעות קוד זה.

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.

מהו kernel_task mac

ב-Index.js, עטפו את רכיב האפליקציה עם הנתב.

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

כל מסלול מחזיר עמוד אחר בהתאם לכתובת האתר המועברת ל- אביזרי נתיב . צור תיקייה חדשה בשם דפים והוסף ארבעה רכיבים - דף הבית, חקור, סטטיסטיקות והגדרות. הנה דוגמה:

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

אם אתה מבקר בנתיב /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 עבור הקישור דרך ה-to prop.

עד לנקודה זו, סרגל הניווט פתוח. כדי להפוך אותו למתקפל, אתה יכול לשנות את הרוחב שלו על ידי שינוי מחלקת ה-CSS כאשר משתמש לוחץ על לחצן החץ. לאחר מכן תוכל לשנות שוב את מחלקת ה-CSS כדי לפתוח אותה.

כדי להשיג את פונקציונליות ההחלפה הזו, עליך לדעת מתי סרגל הצד פתוח וסגור.

לשם כך, השתמש ב- useState hook. זֶה וו תגובה מאפשר לך להוסיף ולעקוב אחר המצב ברכיב פונקציונלי.

ב-sideNav.js, צור את ה-hook למצב הפתוח.

const [open, setopen] = useState(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. אחרת, הכיתה תהיה קודמת.

הבקשה לתיאור מכשיר Windows 10 USB נכשלה

זה זהה לסמל, שמשתנה לסמל החץ הימני כאשר אתה סוגר את סרגל הצד.

זכור לייבא אותו.

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

רכיב סרגל הצד ניתן כעת לקיפול.

קח את הקוד המלא מכאן מאגר GitHub ותנסה את זה בעצמך.

עיצוב רכיבי React

React עושה את זה פשוט לבנות רכיב ניווט מתקפל. אתה יכול להשתמש בחלק מהכלים ש-React מספקת כמו react-router-dom כדי לטפל בניתוב ו-hooks כדי לעקוב אחר המצב הממוטט.

אתה יכול גם להשתמש במודולי CSS כדי לסגנן רכיבים, אם כי אינך חייב. השתמש בהם כדי ליצור מחלקות בהיקף מקומי שהן ייחודיות ושניתן לנער אותן מקבצי החבילה אם הן אינן בשימוש.