ActionSheet 动作面板

从底部浮出的模态，提供和当前场景相关的 2 个以上操作或者更多描述内容。

规则

  • 提供清晰的退出按钮。

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

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

代码演示

基本用法示例

  1. import { ActionSheet, Button, Toast } from 'antd-mobile';
  3. // fix touch to scroll background page on iOS
  4. // https://github.com/ant-design/ant-design-mobile/issues/307
  5. // https://github.com/ant-design/ant-design-mobile/issues/163
  6. const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
  7. let wrapProps;
  8. if (isIPhone) {
  9.   wrapProps = {
  10.     onTouchStart: e => e.preventDefault(),
  11.   };
  12. }
  14. const Test = React.createClass({
  15.   getInitialState() {
  16.     return {
  17.       clicked: 'none',
  18.       clicked1: 'none',
  19.       clicked2: 'none',
  20.     };
  21.   },
  22.   showActionSheet() {
  23.     const BUTTONS = ['操作一', '操作二', '操作三', '删除', '取消'];
  24.     ActionSheet.showActionSheetWithOptions({
  25.       options: BUTTONS,
  26.       cancelButtonIndex: BUTTONS.length - 1,
  27.       destructiveButtonIndex: BUTTONS.length - 2,
  28.       // title: '标题',
  29.       message: '我是描述我是描述',
  30.       maskClosable: true,
  31.       'data-seed': 'logId',
  32.       wrapProps,
  33.     },
  34.     (buttonIndex) => {
  35.       this.setState({ clicked: BUTTONS[buttonIndex] });
  36.     });
  37.   },
  38.   icons: [
  39.     { iconName: 'mail', title: '发邮件' },
  40.     { iconName: 'message', title: '发短信' },
  41.     { iconName: 'team', title: '发送到群' },
  42.     { iconName: 'download', title: '下载' },
  43.     { iconName: 'delete', title: '删除' },
  44.     { iconName: 'ellipsis', title: '更多' },
  45.   ],
  46.   showShareActionSheet() {
  47.     const icons = [...this.icons];
  48.     icons.length = 4;
  49.     ActionSheet.showShareActionSheetWithOptions({
  50.       options: icons,
  51.       // title: '标题',
  52.       message: '我是描述我是描述',
  53.     },
  54.     (buttonIndex) => {
  55.       this.setState({ clicked1: buttonIndex > -1 ? icons[buttonIndex].title : 'cancel' });
  56.       // also support Promise
  57.       return new Promise((resolve) => {
  58.         Toast.info('1000ms 后关闭');
  59.         setTimeout(resolve, 1000);
  60.       });
  61.     });
  62.   },
  63.   showShareActionSheetMulpitleLine() {
  64.     const icons = [[...this.icons], [...this.icons]];
  65.     ActionSheet.showShareActionSheetWithOptions({
  66.       options: icons,
  67.       // title: '标题',
  68.       message: '我是描述我是描述',
  69.     },
  70.     (buttonIndex, rowIndex) => {
  71.       this.setState({ clicked2: buttonIndex > -1 ? icons[rowIndex][buttonIndex].title : 'cancel' });
  72.     });
  73.   },
  74.   render() {
  75.     return (<div style={{ margin: '0 15px' }}>
  76.       <div style={{ margin: '15px 0' }}>
  77.         <Button type="ghost" onClick={this.showActionSheet}>默认状态</Button>
  78.       </div>
  79.       <div style={{ margin: '15px 0' }}>
  80.         <Button type="ghost" onClick={this.showShareActionSheet}>分享功能</Button>
  81.       </div>
  82.       <div style={{ margin: '15px 0' }}>
  83.         <Button type="ghost" onClick={this.showShareActionSheetMulpitleLine}>带多行按钮的分享功能</Button>
  84.       </div>
  85.     </div>);
  86.   },
  87. });
  89. ReactDOM.render(<Test />, mountNode);

ActionSheet动作面板 - 图1

API ( 适用平台：WEB、React-Native )

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) - 点击蒙层是否允许关闭，默认允许

callback支持返回 Promise

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