react-burger-menu

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

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

装包

npm install react-burger-menu --save

使用

首先导入组件

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

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

<Menu>
  <a href='' />
</Menu>

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

/* 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;
  padding: 0.8em;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

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

/* Liu custom */

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 18px;
  height: 12px;
  left: 20px;
  top: 46px;
}

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

• Position

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

<Menu right />

• Width

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

<Menu width={ 280 } />
<Menu width={ '280px' } />
<Menu width={ '20%' } />

• 是否打开

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

<Menu isOpen />

• 状态的变化

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

var isMenuOpen = function(state) {
  return state.isOpen
}

<Menu onStateChange={ isMenuOpen } />

• 覆盖

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

<Menu noOverlay />

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

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

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

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

import React from 'react'
import { slide as Menu } from 'react-burger-menu'
//导入侧边栏

class Sidebar extends React.Component {
  state = {
    isOpen: false
    //设置一个状态
  }
  closeBmMenu = () => {
    this.setState({
      isOpen: false
    })
  }
  //设置一个方法来修改 state 的状态值
  render(){
    return(
      <div className="sidebar">
        <Menu isOpen={this.state.isOpen}>
        //将状态值绑定给插件的 isOpen 属性
          <button onClick={this.closeBmMenu} className="bm-close-button">
          //将改变状态值的方法绑定在你需要触发的节点上
            关闭
          </button>
        </Menu>
      </div>
    )
  }
}

export default Sidebar

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

参考

• Github地址：点击进入

• CTOLib社区：点击进入