Xây dựng Thành phần thanh bên trong React với trình đơn phản ứng

Mọi ứng dụng web đều cần một số loại chuyển . Một trong những phương pháp phổ biến nhất là có một thanh bên ở bên trái nội dung của trang. Hôm nay ta sẽ tạo một trong React bằng cách sử dụng react-burger-menu .

react-burger-menu là một thư viện cho phép ta dễ dàng tạo một sidebar cho các ứng dụng React của bạn . Nó cũng đi kèm với vô số hiệu ứng và phong cách để tùy chỉnh giao diện của menu của ta .

Sử dụng Redux? Hãy thử redux-burger-menu .

Bắt đầu

Trong hướng dẫn này, ta sẽ tạo một thanh bên đơn giản cho trang web của nhà hàng. Bước đầu tiên của ta sẽ là xây dựng trang web bản soạn sẵn của ta . Để cài đặt ứng dụng, tôi đang sử dụng create-react-app , nhưng bạn có thể sử dụng bất kỳ thứ gì bạn thấy phù hợp .

Đây là thành phần ứng dụng root của ta :

index.js

import React from "react"; import ReactDOM from "react-dom";  import "./styles.css"; import SideBar from "./sidebar";  function App() {   return (     <div id="App">       <SideBar />        <div id="page-wrap">         <h1>Cool Restaurant 🍔🍕</h1>         <h2>Check out our offerings in the sidebar!</h2>       </div>     </div>   ); }  const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

Bây giờ hãy thêm một chút kiểu dáng…

styles.css

html, body {   margin: 0; }  #App {   font-family: sans-serif; }  #page-wrap {   text-align: center; }

Tuyệt quá! Bây giờ ta có trang web cơ bản của ta ! Đây là những gì nó trông giống như:

ảnh chụp màn hình trang của ta

Bây giờ ta cần bắt đầu xây dựng thành phần thanh bên của bạn . Đối với điều này, ta sẽ mở một file mới chỉ chứa thanh bên với một vài liên kết.

sidebar.js

import React from "react"; import { slide as Menu } from "react-burger-menu";  export default props => {   return (     <Menu>       <a className="menu-item" href="/">         Home       </a>        <a className="menu-item" href="/burgers">         Burgers       </a>        <a className="menu-item" href="/pizzas">         Pizzas       </a>        <a className="menu-item" href="/desserts">         Desserts       </a>     </Menu>   ); };

Bây giờ ta cần thêm kiểu dáng để làm cho thanh bên hoạt động bình thường. Bạn có thể tìm thấy tên của các lớp có thể được tạo kiểu trong README của dự án. Ta cũng sẽ điều chỉnh một số kiểu để phù hợp hơn với trang của bạn .

styles.css

html, body {   margin: 0; }  #App {   font-family: sans-serif;    /* Give app full page to work with */   height: 100vh; }  #page-wrap {   text-align: center;    /* Prevent sidebar from showing a scrollbar on page */   overflow: auto; }  /* Individual item */ .bm-item {   display: inline-block;    /* Our sidebar item styling */   text-decoration: none;   margin-bottom: 10px;   color: #d1d1d1;   transition: color 0.2s; }  /* Change color on hover */ .bm-item:hover {   color: white; }  /* The rest copied directly from react-burger-menu docs */  /* Position and sizing of burger button */ .bm-burger-button {   position: fixed;   width: 36px;   height: 30px;   left: 36px;   top: 36px; }  /* Color/shape of burger icon bars */ .bm-burger-bars {   background: #373a47; }  /* Position and sizing of clickable cross button */ .bm-cross-button {   height: 24px;   width: 24px; }  /* Color/shape of close button cross */ .bm-cross {   background: #bdc3c7; }  /* General sidebar styles */ .bm-menu {   background: #373a47;   padding: 2.5em 1.5em 0;   font-size: 1.15em; }  /* Morph shape necessary with bubble or elastic */ .bm-morph-shape {   fill: #373a47; }  /* Wrapper for item list */ .bm-item-list {   color: #b8b7ad; }  /* Styling of overlay */ .bm-overlay {   background: rgba(0, 0, 0, 0.3); }

Hoàn hảo! Bây giờ thanh bên của ta trông và hoạt động chính xác như ta muốn.

Thêm hình ảnh động!

react-burger-menu đi kèm với 10 khả năng hoạt ảnh khác nhau. Ngay bây giờ thanh bên của ta thực hiện một hoạt ảnh trượt đơn giản. Tuy nhiên, ta có thể làm cho nó làm được nhiều hơn thế.

Tuy nhiên, đối với các hoạt ảnh nâng cao hơn, ta cần chuyển một vài đạo cụ vào thành phần thanh bên của ta : id của shell bọc trang và các phần tử containers bên ngoài của ta .

index.js

import React from "react"; import ReactDOM from "react-dom";  import "./styles.css"; import SideBar from "./sidebar";  function App() {   return (     <div id="App">       <SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />        <div id="page-wrap">         <h1>Cool Restaurant 🍔🍕</h1>         <h2>Check out our offerings in the sidebar!</h2>       </div>     </div>   ); }  const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

Bây giờ ta thực sự phải chuyển những đạo cụ đó từ thành phần SideBar của ta đến react-burger-menu SideBar react-burger-menu .

sidebar.js

import React from "react"; import { slide as Menu } from "react-burger-menu";  export default props => {   return (     // Pass on our props     <Menu {...props}>       <a className="menu-item" href="/">         Home       </a>        <a className="menu-item" href="/burgers">         Burgers       </a>        <a className="menu-item" href="/pizzas">         Pizzas       </a>        <a className="menu-item" href="/desserts">         Desserts       </a>     </Menu>   ); };

Ta-da! 🎉

Để thử các hoạt ảnh khác nhau của ta , chỉ cần thay đổi slide nhập ở đầu file sidebar.js của ta thành bất kỳ hoạt ảnh nào khác, chẳng hạn như bubble . Danh sách đầy đủ các hình ảnh động có thể được tìm thấy trong tài liệu trình đơn react-burger .

Bạn có thể tìm thấy mã đầy đủ cho bài đăng này trên CodeSandbox .

Nếu bạn muốn tìm hiểu thêm về React, hãy xem loạt bài Cách viết mã trong React.js của ta hoặc xem trang chủ đề React của ta để biết các bài tập và dự án lập trình.

Tags:

Các tin liên quan