ActionSheet 动作面板

定义／Definition

规则 / Rule

• 由用户某个操作行为触发

• 包含两个或以上的按钮

• 提供完成一项任务的不同方法。操作列表提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面UI的空间。

• 在用户完成一项可能有风险的操作前获得用户的确认。操作列表让用户有机会停下来充分考虑当前操作可能导致的危险结果，并为他们提供了一些其它的选项。

• 越靠近列表顶部的操作越容易引起用户注意。潜在风险的操作离列表底部越远，用户在操作的时候就越不容易误点它。使用红色文字来表示可能存在破坏性的操作，且在操作列表的底部使用。

• 避免让用户滚动操作列表。如果你的操作列表中存在过多按钮，用户必须要滚动才能看完所有操作。这样的体验是可能让用户不安，因为他们要花更多的时间来充分理解每个选项的区别。此外，用户在滚动的过程中将很有可能误点其它按钮。

• 分享渠道icon是否出现，由用户手机是否安装对齐APP决定。

• 当分享渠道过多，可横向滚动查看更多。

代码演示

基本

import { ActionSheet, Button } from 'antd-mobile';
const Test = React.createClass({
  getInitialState() {
    return {
      clicked: 'none',
      clicked1: 'none',
      BUTTONS: [
        '操作 0',
        '操作 1',
        '操作 2',
        '删除',
        '取消',
      ],
      icons: [
        {
          icon: <img src="https://os.alipayobjects.com/rmsportal/zfQfLxUmXfgWech.png" style={{
            height: 27,
            verticalAlign: 'top',
          }} />,
          title: '支付宝',
        },
        {
          icon: <img src="https://os.alipayobjects.com/rmsportal/pTINxOHGLBxzEAG.png" style={{
            height: 27,
            verticalAlign: 'top',
          }} />,
          title: '微信好友',
        },
        {
          icon: <img src="https://os.alipayobjects.com/rmsportal/VMjNbIuafpXfjQE.png" style={{
            height: 27,
            verticalAlign: 'top',
          }} />,
          title: 'QQ',
        },
        { iconName: 'android', title: '用Android' },
        { iconName: 'apple', title: '用Apple' },
      ],
    };
  },
  showActionSheet() {
    const BUTTONS = this.state.BUTTONS;
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      destructiveButtonIndex: BUTTONS.length - 2,
      // title: '标题',
      message: '我是描述我是描述',
      maskClosable: true,
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  },
  showShareActionSheet() {
    const icons = this.state.icons;
    ActionSheet.showShareActionSheetWithOptions({
      options: icons,
      title: '标题',
      message: '我是描述我是描述',
    },
    (buttonIndex) => {
      this.setState({ clicked1: icons[buttonIndex].title });
    });
  },
  showActionSheetWithCustom() {
    ActionSheet.showActionSheetWithCustom({
      title: '自定义 ActionSheet',
      message: '我是描述我是描述',
      component: <div style={{ color: 'red', padding: 20 }}>
        自定义内容 &nbsp;
        <Button inline size="small" onClick={() => ActionSheet.close()}>关闭</Button>
      </div>,
    });
  },
  render() {
    return (<div style={{ margin: '0 8px' }}>
      <div style={{ margin: '32px 0' }}>
        {/* <p className="demo-p">默认状态操作列表</p> */}
        <div style={{ padding: '8px 0' }}>
          <Button type="primary" onClick={this.showActionSheet}>默认状态操作列表</Button>
        </div>
        <p className="demo-p">点击过的按钮: &nbsp;
          <span style={{ color: '#222' }}>{this.state.clicked}</span>
        </p>
      </div>
      <div style={{ margin: '32px 0' }}>
        <div style={{ padding: '8px 0' }}>
          <Button type="primary" onClick={this.showShareActionSheet}>带分享功能的操作列表</Button>
        </div>
      </div>
      <div style={{ margin: '32px 0' }}>
        <div style={{ padding: '8px 0' }}>
          <Button type="primary" onClick={this.showActionSheetWithCustom}>自定义的操作列表</Button>
        </div>
      </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) - 点击蒙层是否允许关闭，默认允许

static showShareActionSheetWithOptions(options: Object, callback: Function)

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

• options (array of {icon:React.element, iconName:string, title:string}) - 分享按钮列表 (required)，注意：iconName为antm-icon里的某一个icon的名字，优先级高于icon设置（icon用于设置自己特有的icon内容）

• title (string) - 顶部标题

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

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

static showActionSheetWithCustom(options: Object, callback: Function)

web only

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

• title (string) - 顶部标题

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

• component - 自定义的任何组件

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

static close()

web only