Drawer 抽屉

规则

• 是 Android 推荐的导航方式，常见于该平台应用。

代码演示

基本

import { Drawer, List, NavBar } from 'antd-mobile';
const App1 = React.createClass({
  getInitialState() {
    return {
      open: false,
      position: 'left',
    };
  },
  onOpenChange(isOpen) {
    console.log(isOpen, arguments);
    this.setState({ open: !this.state.open });
  },
  render() {
    const sidebar = (<List>
      <List.Body>
        {[...Array(20).keys()].map((i, index) => {
          if (index === 0) {
            return (<List.Item key={index}
              thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
              multipleLine
            >分类</List.Item>);
          }
          return (<List.Item key={index}
            thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
          >分类{index}</List.Item>);
        })}
      </List.Body>
    </List>);
    const drawerProps = {
      open: this.state.open,
      position: this.state.position,
      onOpenChange: this.onOpenChange,
    };
    return (<div style={{ height: '100%' }}>
      <NavBar iconName="ellipsis" onLeftClick={this.onOpenChange}>
        基本
      </NavBar>
      <div className="drawer-container">
        <Drawer sidebar={sidebar}
          dragHandleStyle={{ display: 'none' }}
          contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
          {...drawerProps}
        >
          请点击左上角
        </Drawer>
      </div>
    </div>);
  },
});
ReactDOM.render(<App1 />, mountNode);

嵌入文档模式

import { Drawer, List, NavBar } from 'antd-mobile';
const App = React.createClass({
  getInitialState() {
    return {
      docked: false,
    };
  },
  onDock(d) {
    this.setState({
      [d]: !this.state[d],
    });
  },
  render() {
    const sidebar = (<List>
      <List.Body>
        {[...Array(20).keys()].map((i, index) => {
          if (index === 0) {
            return (<List.Item key={index}
              thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
              multipleLine
            >分类</List.Item>);
          }
          return (<List.Item key={index}
            thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
          >分类{index}</List.Item>);
        })}
      </List.Body>
    </List>);
    const drawerProps = {
      docked: this.state.docked,
      open: false,
      position: 'left',
    };
    return (<div style={{ height: '100%' }}>
      <NavBar iconName="ellipsis" onLeftClick={() => this.onDock('docked')}>嵌入文档</NavBar>
      <div className="drawer-container">
        <Drawer sidebar={sidebar}
          dragHandleStyle={{ display: 'none' }}
          sidebarStyle={{ border: '1px solid #ddd' }}
          contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
          {...drawerProps}
        >
          请点击左上角
        </Drawer>
      </div>
    </div>);
  },
});
ReactDOM.render(<App />, mountNode);

API