react-burger-menu

react-burger-menu是一个用于创建侧边导航菜单的React组件库。它基于原生HTML和CSS，并且易于自定义。它支持包括手势滑动在内的多种交互方式。

安装

使用npm安装：

npm install react-burger-menu

或者使用yarn安装：

yarn add react-burger-menu

基本使用

react-burger-menu 提供了两个主要的组件：slide和stack。这里我们以slide为例进行演示。

import React, { Component } from 'react';
import { slide as Menu } from 'react-burger-menu';

class Example extends Component {
  showSettings(event) {
    event.preventDefault();
  }
  render() {
    return (
      <Menu>
        <a className="menu-item" href="/">
          Home
        </a>
        <a className="menu-item" href="/about">
          About
        </a>
        <a className="menu-item" href="/contact">
          Contact
        </a>
        <a className="menu-item" href="#" onClick={this.showSettings}>
          Settings
        </a>
      </Menu>
    );
  }
}

这里我们导入了slide组件，并在组件内设置了四个菜单项。Menu组件渲染出来后，受到点击事件时，会自动显示侧边菜单栏。

自定义菜单内容

react-burger-menu 支持对菜单项的文字、颜色和字体大小进行自定义。我们可以在菜单项上添加className，来指定菜单项的样式：

<Menu>
  <a id="home" className="menu-item" href="/">
    Home
  </a>
  <a id="about" className="menu-item" href="/about">
    About
  </a>
</Menu>

我们可以使用如下代码来定义菜单项的样式：

/* The styles for the slide component */
.bm-menu {
  background-color: #373a47;
  padding: 2.5em 0;
  font-size: 1.15em;
}

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

自定义菜单栏样式

react-burger-menu 允许对菜单栏的样式进行自定义。我们可以自定义侧边栏的背景颜色、宽度、阴影等属性。我们仍然使用之前的例子，将菜单背景颜色修改为蓝色，并且加上阴影样式：

/* The styles for the slide component */
.bm-menu {
  background-color: #373a47;
  padding: 2.5em 0;
  font-size: 1.15em;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  width: 200px;
}

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

响应式设计

react-burger-menu允许在不同的设备上显示不同的菜单栏样式。默认情况下，react-burger-menu使用slide在桌面上显示，使用stack在移动设备上显示。我们可以通过设置isOpen属性来控制菜单栏是否显示。

import React, { Component } from 'react';
import { slide as Menu } from 'react-burger-menu';

class Example extends Component {
  showSettings(event) {
    event.preventDefault();
  }
  render() {
    return (
      <Menu>
        <a className="menu-item" href="/">
          Home
        </a>
        <a className="menu-item" href="/about">
          About
        </a>
        <a className="menu-item" href="/contact">
          Contact
        </a>
        <a className="menu-item" href="#" onClick={this.showSettings}>
          Settings
        </a>
      </Menu>
    );
  }
}

import React, { Component } from 'react';
import { stack as Menu } from 'react-burger-menu';

class Example extends Component {
  showSettings(event) {
    event.preventDefault();
  }
  render() {
    return (
      <Menu isOpen={false}>
        <a className="menu-item" href="/">
          Home
        </a>
        <a className="menu-item" href="/about">
          About
        </a>
        <a className="menu-item" href="/contact">
          Contact
        </a>
        <a className="menu-item" href="#" onClick={this.showSettings}>
          Settings
        </a>
      </Menu>
    );
  }
}

总结

react-buger-menu提供了一种简单的方式来创建侧边导航菜单。它易于自定义，并且提供多种交互方式。它还支持响应式设计，能够自动适应不同的设备。