OffCanvas

OffCanvas 组件，侧边栏组件。

组件

OffCanvas

<OffCanvas> 组件，放置侧边栏内容。

Props

<OffCanvas> 属性通过触发器 <OffCanvasTrigger> 传递，暂无需要设置的属性。

OffCanvasTrigger

<OffCanvasTrigger> 组件，侧边栏触发器。

offCanvas

PropType: node

要触发的侧边栏，OffCanvas 组件实例，必需。

placement

PropType: enum('left', 'right')

侧边栏位置，默认为 left。

animation

PropType: enum('slide', 'push')

动画效果，默认为 slide。

pageContainer

PropType: node

使用 push 动画效果时，侧边栏「推」的容器（一般为 SPA 的容器），可以传递容器 id 或者容器 React 组件实例。

onOpen

PropType: func

侧边栏打开时的回调函数。

onClosed

PropType: func

侧边栏关闭以后的回调函数。

方法

调用方式见示例代码。

.open()

打开侧边栏。

.close()

关闭侧边栏。

示例

import React from 'react';
import {
  Link,
} from 'react-router';
import {
  Container,
  Group,
  Button,
  OffCanvas,
  OffCanvasTrigger,
  List,
} from 'amazeui-touch';
const OffCanvasExample = React.createClass({
  onDismiss(e) {
    // 从 OffCanvas 内部元素关闭 OffCanvas
    // 紧耦合，需要重构 OffCanvas
    this.refs.oct.close();
  },
  renderOC() {
    return (
      <OffCanvas>
        <div>
          <h3 className="margin">OffCanvas 内容</h3>
          <p className="margin-h">在 OffCanvas 内放置 React Router Link 演示</p>
          <List>
            <List.Item
              linkComponent={Link}
              linkProps={{
                to: `/`,
                onClick: this.onDismiss,
              }}
              title="组件"
            />
            <List.Item
              linkComponent={Link}
              linkProps={{
                to: '/about',
                onClick: this.onDismiss,
              }}
              title="关于"
            />
            <List.Item
              href="https://github.com/amazeui/amazeui-touch"
              title="GitHub"
              target="_blank"
              onClick={this.onDismiss}
            />
          </List>
        </div>
      </OffCanvas>
    )
  },
  render() {
    return (
      <Container {...this.props}>
        <h2>Overlay</h2>
        <Group
          header="左侧显示 OffCanvas"
        >
          <OffCanvasTrigger
            ref="oct"
            offCanvas={this.renderOC()}
          >
            <Button amStyle="primary">显示左侧 Offcanvas</Button>
          </OffCanvasTrigger>
        </Group>
        <Group
          header="右侧显示 OffCanvas"
        >
          <OffCanvasTrigger
            placement="right"
            offCanvas={<OffCanvas><p>右侧边栏 OffCanvas 内容</p></OffCanvas>}
          >
            <Button amStyle="secondary">显示右侧 Offcanvas</Button>
          </OffCanvasTrigger>
        </Group>
        <h2>Push</h2>
        <Group
          header="右侧显示 OffCanvas"
        >
          <OffCanvasTrigger
            animation="push"
            pageContainer="#sk-root"
            offCanvas={<OffCanvas><p>OffCanvas 内容</p></OffCanvas>}
          >
            <Button amStyle="primary">显示左侧 Offcanvas</Button>
          </OffCanvasTrigger>
        </Group>
        <Group
          header="右侧显示 OffCanvas"
        >
          <OffCanvasTrigger
            animation="push"
            pageContainer="#sk-root"
            placement="right"
            offCanvas={<OffCanvas><p>右侧边栏 OffCanvas 内容</p></OffCanvas>}
          >
            <Button amStyle="secondary">显示右侧 Offcanvas</Button>
          </OffCanvasTrigger>
        </Group>
      </Container>
    );
  }
});
export default OffCanvasExample;