React 滑动导航（Off-Canvas）
made with React

React 滑动导航（Off-Canvas）是一个基于React的滑动导航（Off-Canvas）菜单。 包含的组件：

• OffCanvas 用于组合菜单和主体的主组件
• OffCanvasBody 主体组件
• OffCanvasMenu 菜单组件

安装

Npm

npm i react-offcanvas

Yarn

yarn add react-offcanvas

使用

基础用法

<OffCanvas
  width={300}
  transitionDuration={300}
  isMenuOpened={false}
  position={"left"}
  effect={"overlay"}
>
  <OffCanvasBody className={"my-body-class"} style={{ fontSize: "18px" }}>
    This is the canvas body.
  </OffCanvasBody>
  <OffCanvasMenu className={"my-menu-class"} style={{ fontWeight: "bold" }}>
    This is the canvas menu.
  </OffCanvasMenu>
</OffCanvas>

示例

"use strict";

import React, { Component } from "react";
import { OffCanvas, OffCanvasMenu, OffCanvasBody } from "react-offcanvas";

export default class App extends Component {
  componentWillMount() {
    // sets the initial state
    this.setState({
      isMenuOpened: false
    });
  }

  render() {
    return (
      <OffCanvas
        width={300}
        transitionDuration={300}
        effect={"parallax"}
        isMenuOpened={this.state.isMenuOpened}
        position={"right"}
      >
        <OffCanvasBody
          className={styles.bodyClass}
          style={{ fontSize: "30px" }}
        >
          <p>This is the main body container.</p>
          <p>
            <a href="#" onClick={this.handleClick.bind(this)}>
              Click here
            </a>{" "}
            to toggle the menu.
          </p>
        </OffCanvasBody>
        <OffCanvasMenu className={styles.menuClass}>
          <p>Placeholder content.</p>
          <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
            <li>Link 5</li>
            <li>
              <a href="#" onClick={this.handleClick.bind(this)}>
                Toggle Menu
              </a>
            </li>
          </ul>
        </OffCanvasMenu>
      </OffCanvas>
    );
  }

  handleClick() {
    // toggles the menu opened state
    this.setState({ isMenuOpened: !this.state.isMenuOpened });
  }
}