@5igm4/burger 中文文档教程

Question

react-burger-menu

一个画布侧边栏 React 组件，具有使用 CSS 过渡和 SVG 路径动画的效果和样式集合。

使用 Redux？ 查看 redux-burger-menu 以轻松将 react-burger-menu 集成到您的项目中。

Demo & examples

现场演示：negomi.github.io/react-burger-menu

要在本地构建示例，请运行：

npm install
npm start

然后在浏览器中打开 localhost:8000。

Tests

测试套件使用 Mocha、Chai 和 Sinon，带有 jsdom。

由于 jsdom，您至少需要 Node v4.0.0（或 io.js）才能运行测试取决于它。

要运行一次测试，请运行：

npm test

要使用观察者、TDD 风格运行它们，请运行：

npm run tdd

Installation

使用 react-burger-menu 的最简单方法是从 npm 安装它并将其包含在您自己的React 构建过程（使用 Browserify、Webpack 等） .

您还可以通过在页面中包含 dist/react-burger-menu.js 来使用独立构建。 如果你使用它，请确保你已经包含 React，并且它可以作为全局变量使用。

如果您使用的是 React 0.14+：

npm install react-burger-menu --save

如果您使用的是 React 0.13.3：

npm install react-burger-menu@1.1.6 --save

Usage

侧边栏的项目应该使用 JSX 作为组件的子元素传递。

如果您将此组件与 react-router 一起使用，或者想在菜单中包含其他自定义组件，请查看 this 和 wiki 中的这个。

var Menu = require('react-burger-menu').nameOfAnimation;

var Example = React.createClass({
  showSettings: function(event) {
    event.preventDefault();
    .
    .
    .
  },
  render: function() {
    return (
      <Menu>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contact" className="menu-item" href="/contact">Contact</a>
        <a onClick={ this.showSettings } className="menu-item--small" href="">Settings</a>
      </Menu>
    );
  }
});

Animations

• slide
• stack
• elastic
• bubble
• push
• pushRotate
• scaleDown
• scaleRotate
• fallDown

Properties

一些动画需要某些其他元素才能在您的页面上：

• Page wrapper - an element wrapping the rest of the content on your page (except elements with fixed positioning - see the wiki for details), placed after the menu component

  <Menu pageWrapId={ "page-wrap" } />
  <main id="page-wrap">
    .
    .
    .
  </main>

• Outer container - an element containing everything, including the menu component

  <div id="outer-container">
    <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } />
    <main id="page-wrap">
      .
      .
      .
    </main>
  </div>

如果您使用的动画需要这些元素中的一个/两个，则需要为该元素提供一个 ID，并将该 ID 作为 pageWrapId 和 传递给菜单组件>outerContainerId 道具分别。

检查此表以查看哪些动画需要这些元素：

Animation	pageWrapId	outerContainerId
slide
stack
elastic	✓	✓
bubble
push	✓	✓
pushRotate	✓	✓
scaleDown	✓	✓
scaleRotate	✓	✓
fallDown	✓	✓

Position

默认情况下，菜单从左侧打开。 要从右侧打开它，请使用 right 属性。 它只是一个布尔值，因此您无需指定值。 然后使用 CSS 设置按钮的位置。

<Menu right />

Width

您可以使用 width 属性指定菜单的宽度（以像素为单位）。 默认值为 300。

<Menu width={ 280 } />

Open state

您可以使用 isOpen 属性控制侧边栏是打开还是关闭。 例如，如果您需要在用户单击菜单中的某个项目后关闭菜单，或者如果您想要从除标准汉堡图标之外的其他按钮打开菜单，这将很有用。 默认值为 false。

// To render the menu open
<Menu isOpen />
<Menu isOpen={ true } />

// To render the menu closed
<Menu isOpen={ false } />

如果您想在一开始就打开菜单，您需要在父组件的 componentDidMount() 函数中设置此属性。

State change

您可以检测侧边栏是打开还是关闭通过将回调函数传递给 onStateChange。 回调将接收一个包含新状态的对象作为其第一个参数。

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

<Menu onStateChange={ isMenuOpen } />

Overlay

您可以使用 noOverlay 关闭默认覆盖。

<Menu noOverlay />

Custom icons

您可以使用自定义 ReactElement 替换构成汉堡和十字图标的默认条。 将它们分别作为 customBurgerIcon 和 customCrossIcon 道具传递。

<Menu customBurgerIcon={ <img src="img/icon.svg" /> } />
<Menu customCrossIcon={ <img src="img/cross.svg" /> } />

您应该使用 .bm-burger-button 和 .bm-cross-button 类调整它们的大小，但元素本身将具有类 .bm- icon 或 .bm-cross 如果您需要直接访问它。

您还可以通过将 false 传递给这些道具来禁用图标元素，这样它们就不会被包含在内。

<Menu customBurgerIcon={ false } />
<Menu customCrossIcon={ false } />

如果您希望使用 isOpen 属性对菜单进行独占的外部控制，这会很有用。

Custom ID

还有一个可选的 id 属性，它将简单地向呈现的菜单的最外层元素添加一个 ID。 这不是任何功能所必需的。

<Menu id={ "sidebar" } />

Styling

所有动画都由组件在内部处理。 但是，视觉样式（颜色、字体等）不是并且需要通过 CSS 或作为 styles 属性传递的 JavaScript 对象提供。

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);
}

JavaScript

相同的样式可以编写为 JavaScript 对象，如下所示：

var styles = {
  bmBurgerButton: {
    position: 'fixed',
    width: '36px',
    height: '30px',
    left: '36px',
    top: '36px'
  },
  bmBurgerBars: {
    background: '#373a47'
  },
  bmCrossButton: {
    height: '24px',
    width: '24px'
  },
  bmCross: {
    background: '#bdc3c7'
  },
  bmMenu: {
    background: '#373a47',
    padding: '2.5em 1.5em 0',
    fontSize: '1.15em'
  },
  bmMorphShape: {
    fill: '#373a47'
  },
  bmItemList: {
    color: '#b8b7ad',
    padding: '0.8em'
  },
  bmOverlay: {
    background: 'rgba(0, 0, 0, 0.3)'
  }
}

<Menu styles={ styles } />

Server-side rendering

该组件使用 Radium 来管理其内部样式，它还处理供应商前缀。 在通用/同构应用程序中，您需要通过 radiumConfig 将用户代理传递给组件 属性让 Radium 知道要应用哪些前缀。

这是使用 Express 的示例：

<Menu radiumConfig={{ userAgent: req.headers['user-agent'] }} />

如果您不太关心内存/数据使用情况并且由于某种原因无法提供用户代理（例如，您的应用程序位于 CDN 或其他代理之后），您可以指定用户代理 'all' 以使用所有供应商前缀。

<Menu radiumConfig={{ userAgent: 'all' }} />

Browser support

因为这个项目使用 CSS3 特性，所以它只适用于现代浏览器。 目前某些浏览器无法正确应用某些动画。

Chrome 和 Firefox 完全支持，但 Safari 和 IE 对某些菜单有奇怪的行为。

Help

查看常见问题解答 (https://github.com/negomi/react-burger-menu/wiki/FAQ) 看看您的问题是否已经得到解答，或者 打开一个新问题。

License

麻省理工学院