Drawer 抽屉

用于在屏幕边缘显示应用导航等内容的面板。

规则

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

代码演示

基本

遮罩层模式

  1. import { Drawer, List, NavBar, Icon } from 'antd-mobile';
  2. class App1 extends React.Component {
  3. state = {
  4. open: true,
  5. }
  6. onOpenChange = (...args) => {
  7. console.log(args);
  8. this.setState({ open: !this.state.open });
  9. }
  10. render() {
  11. // fix in codepen
  12. const sidebar = (<List>
  13. {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map((i, index) => {
  14. if (index === 0) {
  15. return (<List.Item key={index}
  16. thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
  17. multipleLine
  18. >Category</List.Item>);
  19. }
  20. return (<List.Item key={index}
  21. thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
  22. >Category{index}</List.Item>);
  23. })}
  24. </List>);
  25. return (<div>
  26. <NavBar icon={<Icon type="ellipsis" />} onLeftClick={this.onOpenChange}>Basic</NavBar>
  27. <Drawer
  28. className="my-drawer"
  29. style={{ minHeight: document.documentElement.clientHeight }}
  30. enableDragHandle
  31. contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
  32. sidebar={sidebar}
  33. open={this.state.open}
  34. onOpenChange={this.onOpenChange}
  35. >
  36. Click upper-left corner
  37. </Drawer>
  38. </div>);
  39. }
  40. }
  41. ReactDOM.render(<App1 />, mountNode);
  1. .my-drawer {
  2. position: relative;
  3. overflow: auto;
  4. -webkit-overflow-scrolling: touch;
  5. }
  6. .my-drawer .am-drawer-sidebar {
  7. background-color: #fff;
  8. overflow: auto;
  9. -webkit-overflow-scrolling: touch;
  10. }
  11. .my-drawer .am-drawer-sidebar .am-list {
  12. width: 300px;
  13. padding: 0;
  14. }

嵌入文档模式

嵌入到文档流中

  1. import { Drawer, List, NavBar, Icon } from 'antd-mobile';
  2. class App extends React.Component {
  3. state = {
  4. docked: false,
  5. }
  6. onDock = (d) => {
  7. this.setState({
  8. [d]: !this.state[d],
  9. });
  10. }
  11. render() {
  12. const sidebar = (<List>
  13. {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map((i, index) => {
  14. if (index === 0) {
  15. return (<List.Item key={index}
  16. thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
  17. multipleLine
  18. >Category</List.Item>);
  19. }
  20. return (<List.Item key={index}
  21. thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
  22. >Category{index}</List.Item>);
  23. })}
  24. </List>);
  25. return (<div style={{ height: '100%' }}>
  26. <NavBar icon={<Icon type="ellipsis" />} onLeftClick={() => this.onDock('docked')}>
  27. Docked in document
  28. </NavBar>
  29. <Drawer
  30. className="my-drawer"
  31. style={{ minHeight: document.documentElement.clientHeight }}
  32. contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
  33. sidebarStyle={{ border: '1px solid #ddd' }}
  34. sidebar={sidebar}
  35. docked={this.state.docked}
  36. >
  37. Click upper-left corner
  38. </Drawer>
  39. </div>);
  40. }
  41. }
  42. ReactDOM.render(<App />, mountNode);
  1. .my-drawer {
  2. position: relative;
  3. overflow: auto;
  4. -webkit-overflow-scrolling: touch;
  5. }
  6. .my-drawer .am-drawer-sidebar {
  7. background-color: #fff;
  8. overflow: auto;
  9. -webkit-overflow-scrolling: touch;
  10. }
  11. .my-drawer .am-drawer-sidebar .am-list {
  12. width: 300px;
  13. padding: 0;
  14. }

Drawer抽屉 - 图1

API

属性说明类型默认值
sidebar抽屉里的内容ReactNode-
onOpenChangeopen 状态切换时调用(open: bool): void-
open开关状态Booleanfalse
position抽屉所在位置String'left', enum{'left', 'right', 'top', 'bottom'}
sidebarStyle-Object{}
contentStyle-Object{}
overlayStyle-Object{}
dragHandleStyle-Object{}
touch是否开启触摸手势Booleantrue
transitions是否开启动画Booleantrue
docked是否嵌入到正常文档流里Booleanfalse
enableDragHandle是否禁止 dragHandleBooleanfalse
dragToggleDistance打开关闭抽屉时距 sidebar 的拖动距离Number30