ActionSheet 动作面板

规则

• 提供清晰的退出按钮。

• 可高亮破坏性操作，eg：将『删除』处理成红色文本。

• 不要放置过多内容，避免面板纵向滚动。

代码演示

基本

import { ActionSheet, Button, Toast } from 'antd-mobile';
const Test = React.createClass({
  getInitialState() {
    return {
      clicked: 'none',
      clicked1: 'none',
      clicked2: 'none',
    };
  },
  showActionSheet() {
    const BUTTONS = ['操作 0', '操作 1', '操作 2', '删除', '取消'];
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      destructiveButtonIndex: BUTTONS.length - 2,
      // title: '标题',
      message: '我是描述我是描述',
      maskClosable: true,
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  },
  icons: [
    { iconName: 'mail', title: '发邮件' },
    { iconName: 'message', title: '发短信' },
    { iconName: 'team', title: '发送到群' },
    { iconName: 'download', title: '下载' },
    { iconName: 'delete', title: '删除' },
    { iconName: 'ellipsis', title: '更多' },
  ],
  showShareActionSheet() {
    const icons = [...this.icons];
    icons.length = 4;
    ActionSheet.showShareActionSheetWithOptions({
      options: icons,
      // title: '标题',
      message: '我是描述我是描述',
    },
    (buttonIndex) => {
      this.setState({ clicked1: buttonIndex > -1 ? icons[buttonIndex].title : 'cancel' });
      // also support Promise
      return new Promise((resolve) => {
        Toast.info('1000ms 后关闭');
        setTimeout(resolve, 1000);
      });
    });
  },
  showShareActionSheetMulpitleLine() {
    const icons = [[...this.icons], [...this.icons]];
    ActionSheet.showShareActionSheetWithOptions({
      options: icons,
      // title: '标题',
      message: '我是描述我是描述',
    },
    (buttonIndex, rowIndex) => {
      this.setState({ clicked2: buttonIndex > -1 ? icons[rowIndex][buttonIndex].title : 'cancel' });
    });
  },
  render() {
    return (<div style={{ margin: '0 15px' }}>
      <div style={{ margin: '15px 0' }}>
        <Button type="ghost" onClick={this.showActionSheet}>默认状态操作列表</Button>
      </div>
      <div style={{ margin: '15px 0' }}>
        <Button type="ghost" onClick={this.showShareActionSheet}>带分享功能的操作列表</Button>
      </div>
      <div style={{ margin: '15px 0' }}>
        <Button type="ghost" onClick={this.showShareActionSheetMulpitleLine}>带多行按钮的分享功能操作列表</Button>
      </div>
    </div>);
  },
});
ReactDOM.render(<Test />, mountNode);

API

static showActionSheetWithOptions(options: Object, callback: Function)

options对象必须包含以下的一个或者多个：

• options (array of strings) - 按钮标题列表 (required)

• cancelButtonIndex (int) - 按钮列表中取消按钮的索引位置

• destructiveButtonIndex (int) - 按钮列表中破坏性按钮（一般为删除）的索引位置

• title (string) - 顶部标题

• message (string/React.element) - 顶部标题下的简要消息

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

• androidActionSheetName (string) - android 平台下可以传入一个名字

callback支持返回 Promise

static showShareActionSheetWithOptions(options: Object, callback: Function)

options对象必须包含以下的一个或者多个：

• options (array of {icon:React.node, iconName:string, title:string}) - 分享按钮列表 (required)

  • 注意：iconName为 icon 组件里的某一个 icon 的名字，优先级高于icon属性设置（icon属性用于设置自定义内容）

  • options 可以是二维数组，能显示多行按钮，例如[[{icon,title},{icon,title}], [{icon,title},{icon,title}]]表示两行两列

  • 当为二维数组时 callback 有两个参数，第一个为列序列、第二个为行序列

• cancelButtonText (string) - (web only) 默认为取消

• title (string) - 顶部标题

• message (string/React.element) - 顶部标题下的简要消息

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

• androidActionSheetName (string) - android 平台下可以传入一个名字

callback支持返回 Promise

static close() - (web only) programmatically close.

static close(androidActionSheetName) - (android only) programmatically close.