Actionsheet

上滑列表。ActionSheet UI 提供与WeLink规范一致的视图。

• 支持的ActionSheet类型：Android 弹出式菜单、iOS弹出式菜单。
• 适用于有不少于2个、不多于5个选项需要提供给用户选择的场景。选项过多时，可使用Picker组件。

参数说明

效果示例

import React from 'react';
import { Button, ActionSheet } from '@wecode/react-weui';

export default class ActionSheetDemo extends React.Component {
  state = {
    iosShow: false,
    // androidShow: false,
    menus: [
      {
        label: '这是一个超长超长的示例菜单单单单单单单单单单单单单单单单单单单单单',
        onClick: () => {}
      },
      {
        label: '示例菜单',
        onClick: () => {}
      },
      {
        label: '示例菜单',
        onClick: () => {}
      },
      {
        label: '删除',
        warn: true,
        onClick: () => {}
      }
    ],
    actions: [
      {
        label: '取消',
        onClick: this.hide.bind(this)
      }
    ]
  };

  hide() {
    this.setState({
      iosShow: false
    });
  }

  render() {
    const { menus, actions, iosShow } = this.state;
    return (
      <section>
        <Button type="default" onClick={e => this.setState({ iosShow: true })}>
          ActionSheet
        </Button>
        <ActionSheet
          menus={menus}
          actions={actions}
          show={iosShow}
          onRequestClose={e => this.setState({ iosShow: false })}
        />
      </section>
    );
  }
}