Dropdown 下拉菜单

定义／Definition

下拉菜单是由其他控件触发上的，可以通过列表项进行选择、操作。

规则 / Rule

  • 点击背景的任一位置时，可以隐藏菜单

  • 下拉菜单项可以是选择也可以是行为（筛选、跳转…）

代码演示

Dropdown

  1. // 此处用作demo展示，不要用在生产环境
  2. this.customNavFlag = true;
  4. import { Dropdown, Button, Menu } from 'antd-mobile';
  6. const SelectorDataForDropdown = [
  7.   {
  8.     label: '中餐',
  9.     value: '21',
  10.   }, {
  11.     label: '还没生效',
  12.     value: '22',
  13.     disabled: true,
  14.   }, {
  15.     label: '关闭浮层',
  16.     value: 'qx',
  17.   }, {
  18.     label: '自助餐',
  19.     value: '24',
  20.   }, {
  21.     label: '快餐',
  22.     value: '25',
  23.   }, {
  24.     label: '小吃',
  25.     value: '26',
  26.   }, {
  27.     label: '面包甜点',
  28.     value: '27',
  29.   }, {
  30.     label: '生鲜水果',
  31.     value: '28',
  32.   }, {
  33.     label: '面食',
  34.     value: '29',
  35.   }, {
  36.     label: '休闲食品',
  37.     value: '210',
  38.   }, {
  39.     label: '日韩料理',
  40.     value: '211',
  41.   }, {
  42.     label: '咖啡',
  43.     value: '212',
  44.   }, {
  45.     label: '粤菜',
  46.     value: '213',
  47.   },
  48. ];
  50. const Test = React.createClass({
  51.   getInitialState() {
  52.     return {
  53.       sel: '',
  54.     };
  55.   },
  56.   onClick() {
  57.     Dropdown.show(<div style={{ padding: 8 }}>
  58.       <Button type="primary" onClick={() => { this.onClose('opt 1'); }}>创建层叠Dropdown</Button>
  59.       <div style={{ height: 8 }} />
  60.       <Button type="primary" ghost onClick={() => { this.onClose('opt 2'); }}>opt 2</Button>
  61.       <div style={{ height: 8 }} />
  62.       <Button onClick={() => { this.onClose('cancel'); }}>取消</Button>
  63.     </div>, { maskClosable: false });
  64.   },
  65.   onClose(sel) {
  66.     if (sel === 'opt 1') {
  67.       this.newInstance();
  68.       return;
  69.     }
  70.     this.setState({ sel });
  71.     Dropdown.hide();
  72.   },
  73.   newInstance() {
  74.     const ins = Dropdown.newInstance();
  75.     const hide = (value) => {
  76.       if (value[0] === 'qx') {
  77.         ins.hide();
  78.       }
  79.     };
  80.     ins.show(<Menu
  81.       level={1}
  82.       value={[SelectorDataForDropdown[0]]}
  83.       data={SelectorDataForDropdown}
  84.       onChange={hide}
  85.     />, { maskClosable: false });
  86.   },
  87.   render() {
  88.     return (<div style={{ padding: 8 }}>
  89.       <Button type="primary" onClick={this.onClick}>show Dropdown</Button>
  90.       已选项目：{this.state.sel}
  91.     </div>);
  92.   },
  93. });
  95. ReactDOM.render(<Test />, mountNode);

Dropdown下拉菜单 - 图1

API (web)

static show(content: React.Element, options: Object):

options可选项：

  • maskClosable (bool) - 点击蒙层是否允许关闭，默认允许

  • transitionName (string) 自定义显示隐藏变换动画

  • maskTransitionName (string) 自定义遮罩层变换动画

static hide(): 关闭 Dropdown

static newInstance():

有些情况下，页面需要多处出现 Dropdown ，或在 Dropdown 里再产生 Dropdown。 返回 Dropdown 实例对象。对象包括：

  • show (function) - 同 static show

  • hide (function) - 同 static hide

API (ios/android)

  • visible (bool) - 是否显示 dropdown

  • maskClosable (bool) - 点击蒙层是否允许关闭，默认允许

  • onShow (function) - 显示 dropdown 时调用

  • onClose (function) - 隐藏 dropdown 时调用