Drawer 抽屉

定义／Definition

属于次级导航分类，结合手势操作，从屏幕边缘唤出抽屉栏。 可用做侧边菜单、右边抽屉。

规则 / Rule

侧边抽屉导航最好不要设计在顶部或者底部，防止和系统的操作冲突。

代码演示

基本

遮罩层模式 

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  5. import { Drawer, List, NavBar } from 'antd-mobile';
  7. const App1 = React.createClass({
  8.   getInitialState() {
  9.     return {
  10.       open: false,
  11.       position: 'left',
  12.     };
  13.   },
  14.   onOpenChange(isOpen) {
  15.     console.log(isOpen, arguments);
  16.     this.setState({ open: !this.state.open });
  17.   },
  18.   render() {
  19.     const sidebar = (<List>
  20.       <List.Body>
  21.         {[1, 2, 3, 4, 5, 6].map((i, index) => {
  22.           if (index === 0) {
  23.             return (<List.Item key={index}
  24.               thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
  25.               line={2}
  26.             ><div className="am-list-title">收银员</div><div className="am-list-brief">仅可进行收款、退款及查账操作</div></List.Item>);
  27.           }
  28.           return (<List.Item key={index}
  29.             thumb="http://img0.bdstatic.com/img/image/daren/ximeng2.jpg"
  30.             line={2}
  31.           ><div className="am-list-title">收银员</div><div className="am-list-brief">仅可进行收款、退款及查账操作</div></List.Item>);
  32.         })}
  33.       </List.Body>
  34.     </List>);
  36.     const drawerProps = {
  37.       open: this.state.open,
  38.       position: this.state.position,
  39.       onOpenChange: this.onOpenChange,
  40.     };
  41.     return (<div>
  42.       <NavBar iconName="ellipsis" onLeftClick={this.onOpenChange}>
  43.         基本
  44.       </NavBar>
  45.       <div className="drawer-container">
  46.         <Drawer sidebar={sidebar} dragHandleStyle={{ display: 'none' }} {...drawerProps}>
  47.           请点击左上角
  48.         </Drawer>
  49.       </div>
  50.     </div>);
  51.   },
  52. });
  54. ReactDOM.render(<App1 />, mountNode);

嵌入文档模式

嵌入到文档流中 

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  5. import { Drawer, List, NavBar } from 'antd-mobile';
  7. const App = React.createClass({
  8.   getInitialState() {
  9.     return {
  10.       docked: false,
  11.     };
  12.   },
  13.   onDock(d) {
  14.     this.setState({
  15.       [d]: !this.state[d],
  16.     });
  17.   },
  18.   render() {
  19.     const sidebar = (<List>
  20.       <List.Body>
  21.         {[1, 2, 3, 4, 5, 6].map((i, index) => {
  22.           if (index === 0) {
  23.             return (<List.Item key={index}
  24.               thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
  25.               line={2}
  26.             ><div className="am-list-title">收银员</div><div className="am-list-brief">仅可进行收款、退款及查账操作</div></List.Item>);
  27.           }
  28.           return (<List.Item key={index}
  29.             thumb="http://img0.bdstatic.com/img/image/daren/ximeng2.jpg"
  30.             line={2}
  31.           ><div className="am-list-title">收银员</div><div className="am-list-brief">仅可进行收款、退款及查账操作</div></List.Item>);
  32.         })}
  33.       </List.Body>
  34.     </List>);
  36.     const drawerProps = {
  37.       docked: this.state.docked,
  38.       open: false,
  39.       position: 'left',
  40.     };
  41.     return (<div>
  42.       <NavBar iconName="ellipsis" onLeftClick={() => this.onDock('docked')}>嵌入文档</NavBar>
  43.       <div className="drawer-container">
  44.         <Drawer sidebar={sidebar} dragHandleStyle={{ display: 'none' }} {...drawerProps}>
  45.           请点击左上角
  46.         </Drawer>
  47.       </div>
  48.     </div>);
  49.   },
  50. });
  52. ReactDOM.render(<App />, mountNode);

右出

嵌入到文档流中 

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  5. import { Drawer, List, NavBar } from 'antd-mobile';
  7. const App = React.createClass({
  8.   getInitialState() {
  9.     return {
  10.       docked1: false,
  11.     };
  12.   },
  13.   onDock(d) {
  14.     this.setState({
  15.       [d]: !this.state[d],
  16.     });
  17.   },
  18.   render() {
  19.     const sidebar = (<List>
  20.       <List.Body>
  21.         {[1, 2, 3, 4, 5, 6].map((i, index) => {
  22.           if (index === 0) {
  23.             return (<List.Item key={index}
  24.               thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
  25.               line={2}
  26.             ><div className="am-list-title">收银员</div><div className="am-list-brief">仅可进行收款、退款及查账操作</div></List.Item>);
  27.           }
  28.           return (<List.Item key={index}
  29.             thumb="http://img0.bdstatic.com/img/image/daren/ximeng2.jpg"
  30.             line={2}
  31.           ><div className="am-list-title">收银员</div><div className="am-list-brief">仅可进行收款、退款及查账操作</div></List.Item>);
  32.         })}
  33.       </List.Body>
  34.     </List>);
  36.     const drawerProps1 = {
  37.       docked: this.state.docked1,
  38.       open: false,
  39.       position: 'right',
  40.     };
  41.     return (<div>
  42.       <NavBar iconName={false}
  43.         rightContent={<span onClick={() => this.onDock('docked1')}>点击</span>}
  44.       >
  45.         嵌入文档
  46.       </NavBar>
  47.       <div className="drawer-container">
  48.         <Drawer sidebar={sidebar} dragHandleStyle={{ display: 'none' }} {...drawerProps1}>
  49.           请点击右上角
  50.         </Drawer>
  51.       </div>
  52.     </div>);
  53.   },
  54. });
  56. ReactDOM.render(<App />, mountNode);

Drawer抽屉 - 图1

API

成员说明类型默认值
sidebarStyle(web)-Object{}
contentStyle(web)-Object{}
overlayStyle(web)-Object{}
dragHandleStyle(web)-Object{}
touch(web)是否开启触摸手势Booleantrue
transitions(web)是否开启动画Booleantrue
docked(web)是否嵌入到正常文档流里Booleanfalse
dragToggleDistance(web)打开关闭抽屉时距sidebar的拖动距离Number30
open(web)开关状态Booleanfalse
children主要内容anyn/a
sidebar抽屉里的内容anyn/a
onOpenChangeopen 状态切换时调用Functionn/a
position抽屉所在位置String'left', enum{'left', 'right', 'top'(web), 'bottom'(web)}
drawerWidth(ios/android)抽屉宽度Number300
drawerBackgroundColor(ios/android)指定抽屉背景色String-
openDrawer(ios/android)打开drawerFunctionn/a
closeDrawer(ios/android)关闭drawerFunctionn/a