วิธีสร้างเมนูนำทางที่ยุบได้โดยใช้ React

เมนูการนำทางแถบด้านข้างมักจะประกอบด้วยรายการลิงก์ในแนวตั้ง คุณสามารถสร้างชุดลิงก์ใน React โดยใช้ react-router-dom

ทำตามขั้นตอนเหล่านี้เพื่อสร้างเมนูการนำทางด้านข้างของ React พร้อมลิงก์ที่มีไอคอน UI ของวัสดุ ลิงก์จะแสดงหน้าต่างๆ เมื่อคุณคลิก

---

---

การสร้าง React Application

หากคุณมี . อยู่แล้ว โครงการตอบโต้ โปรดข้ามไปยังขั้นตอนถัดไป

คลิปวิดีโอประจำวันนี้

คุณสามารถใช้คำสั่ง 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 Router

องค์ประกอบ div ที่ส่งคืนโดยฟังก์ชันแผนที่ควรเป็นลิงก์ ใน React คุณสามารถสร้างลิงก์และเส้นทางโดยใช้ react-router-dom

ในเทอร์มินัล ติดตั้ง react-router-dom ผ่าน npm

วิธีแคปหน้าจอใน snapchat โดยที่ไม่มีใครรู้

npm install react-router-dom@latest 

คำสั่งนี้ติดตั้ง react-router-dom เวอร์ชันล่าสุด

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

แต่ละเส้นทางส่งคืนหน้าที่แตกต่างกันขึ้นอยู่กับ URL ที่ส่งไปยัง อุปกรณ์ประกอบฉากเส้นทาง . สร้างโฟลเดอร์ใหม่ชื่อ Pages และเพิ่มส่วนประกอบสี่ส่วน — หน้าหน้าแรก สำรวจ สถิติ และการตั้งค่า นี่คือตัวอย่าง:

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 สำหรับลิงก์ผ่านไปยังเสา

จนถึงจุดนี้ แถบนำทางเปิดอยู่ ในการทำให้ยุบได้ คุณสามารถสลับความกว้างได้โดยเปลี่ยนคลาส CSS เมื่อผู้ใช้คลิกปุ่มลูกศร จากนั้นคุณสามารถเปลี่ยนคลาส CSS อีกครั้งเพื่อเปิด

เพื่อให้บรรลุฟังก์ชันการสลับนี้ คุณจำเป็นต้องทราบเมื่อแถบด้านข้างเปิดและปิด

สำหรับสิ่งนี้ ให้ใช้ useState hook นี้ ตอบสนองเบ็ด ให้คุณเพิ่มและติดตามสถานะในองค์ประกอบการทำงานได้

ใน sideNav.js ให้สร้าง hook สำหรับสถานะเปิด

const [open, setopen] = useState(true) 

เริ่มต้นสถานะเปิดเป็นจริง ดังนั้นแถบด้านข้างจะเปิดอยู่เสมอเมื่อคุณเริ่มแอปพลิเคชัน

ถัดไป สร้างฟังก์ชันที่จะสลับสถานะนี้

A6D959027917F61E4DAF69D4550927E4F10FF9B

ตอนนี้คุณสามารถใช้ค่าเปิดเพื่อสร้างคลาส 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 เป็นจริง องค์ประกอบ div ภายนอกจะมีชื่อคลาส sidenav มิฉะนั้น คลาสจะถูก sidenavd

ไอคอนนี้จะเหมือนกัน ซึ่งจะเปลี่ยนเป็นไอคอนลูกศรขวาเมื่อคุณปิดแถบด้านข้าง

อย่าลืมนำเข้า

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

ส่วนประกอบของแถบด้านข้างสามารถยุบได้ในขณะนี้

รับรหัสที่สมบูรณ์จากนี้ ที่เก็บ GitHub และลองด้วยตัวคุณเอง

ส่วนประกอบปฏิกิริยาจัดแต่งทรงผม

React ทำให้ง่ายต่อการสร้างส่วนประกอบการนำทางที่ยุบได้ คุณสามารถใช้เครื่องมือบางอย่างที่ React มีให้ เช่น react-router-dom เพื่อจัดการการกำหนดเส้นทาง และ hooks เพื่อติดตามสถานะที่ยุบ

วิธีดาวน์โหลดสตรีมมิ่งวิดีโอ chrome

คุณยังสามารถใช้โมดูล CSS เพื่อจัดรูปแบบองค์ประกอบได้ แม้ว่าคุณจะไม่จำเป็นก็ตาม ใช้พวกมันเพื่อสร้างคลาสที่กำหนดขอบเขตในเครื่องที่ไม่ซ้ำใคร และคุณสามารถเขย่าจากไฟล์บันเดิลได้หากไม่ได้ใช้งาน