react-burger-menu

目前使用数最多的侧边栏插件

因为我们用 create-react-app 创建的 React 环境，所以在这里我们使用 React 的组件形式。

装包

  1. npm install react-burger-menu --save

使用

首先导入组件

  1. import { slide as Menu } from 'react-burger-menu'

将需要的侧边栏的项目，放在<Menu>内

  1. <Menu>
  2.   <a href='' />
  3. </Menu>

贴入 CSS 样式，进行定制自己需要的样式

  1. /* Position and sizing of burger button */
  2. .bm-burger-button {
  3.   position: fixed;
  4.   width: 36px;
  5.   height: 30px;
  6.   left: 36px;
  7.   top: 36px;
  8. }
  10. /* Color/shape of burger icon bars */
  11. .bm-burger-bars {
  12.   background: #373a47;
  13. }
  15. /* Position and sizing of clickable cross button */
  16. .bm-cross-button {
  17.   height: 24px;
  18.   width: 24px;
  19. }
  21. /* Color/shape of close button cross */
  22. .bm-cross {
  23.   background: #bdc3c7;
  24. }
  26. /* General sidebar styles */
  27. .bm-menu {
  28.   background: #373a47;
  29.   padding: 2.5em 1.5em 0;
  30.   font-size: 1.15em;
  31. }
  33. /* Morph shape necessary with bubble or elastic */
  34. .bm-morph-shape {
  35.   fill: #373a47;
  36. }
  38. /* Wrapper for item list */
  39. .bm-item-list {
  40.   color: #b8b7ad;
  41.   padding: 0.8em;
  42. }
  44. /* Styling of overlay */
  45. .bm-overlay {
  46.   background: rgba(0, 0, 0, 0.3);
  47. }

小贴士：一般我们修改别人的样式或者插件的样式时，不是直接删除 重写 覆盖，而是在下面写一个自己定制的样式

  1. /* Liu custom */
  3. /* Position and sizing of burger button */
  4. .bm-burger-button {
  5.   position: fixed;
  6.   width: 18px;
  7.   height: 12px;
  8.   left: 20px;
  9.   top: 46px;
  10. }

利用插件自带的属性进行修改

  • Position

默认情况下，菜单从左边打开。要从右边打开，需要使用正确的道具。它只是一个布尔值，所以你不需要指定一个值。然后使用CSS设置按钮的位置。

  1. <Menu right />
  • Width

可以使用宽度限定符指定菜单的宽，默认值是300

  1. <Menu width={ 280 } />
  2. <Menu width={ '280px' } />
  3. <Menu width={ '20%' } />
  • 是否打开

你可以控制侧边栏是否打开或关闭与开放的道具，默认值为false

  1. <Menu isOpen />
  • 状态的变化

你可以检测到侧边栏是否打开或关闭通过回调函数OnStateChange，回调将接收一个包含新状态作为第一个参数的对象。

  1. var isMenuOpen = function(state) {
  2.   return state.isOpen
  3. }
  5. <Menu onStateChange={ isMenuOpen } />
  • 覆盖

你可以关掉默认覆盖无叠加

  1. <Menu noOverlay />

怎么解决路由跳转时，侧边栏直接消失的问题

利用插件的isOpen使侧边栏先消失，再跳转。

在组件中创建一个isOpen状态值，写一个方法用来控制这个状态值，最后用这个状态去控制插件的 isOpen

将这个方法绑定到需要跳转的路由上，就可以解决这个问题

  1. import React from 'react'
  2. import { slide as Menu } from 'react-burger-menu'
  3. //导入侧边栏
  5. class Sidebar extends React.Component {
  6.   state = {
  7.     isOpen: false
  8.     //设置一个状态
  9.   }
  10.   closeBmMenu = () => {
  11.     this.setState({
  12.       isOpen: false
  13.     })
  14.   }
  15.   //设置一个方法来修改 state 的状态值
  16.   render(){
  17.     return(
  18.       <div className="sidebar">
  19.         <Menu isOpen={this.state.isOpen}>
  20.         //将状态值绑定给插件的 isOpen 属性
  21.           <button onClick={this.closeBmMenu} className="bm-close-button">
  22.           //将改变状态值的方法绑定在你需要触发的节点上
  23.             关闭
  24.           </button>
  25.         </Menu>
  26.       </div>
  27.     )
  28.   }
  29. }
  31. export default Sidebar

没有解决的问题：跳转没有侧边栏的组件时，侧边栏会直接消失。

参考