ActionSheet 动作面板

从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

规则

  • 提供清晰的退出按钮。

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

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

代码演示

基本

  1. /* eslint global-require: 0 */
  2. import { ActionSheet, Button, Toast, Icon } from 'antd-mobile';
  4. // fix touch to scroll background page on iOS
  5. // https://github.com/ant-design/ant-design-mobile/issues/307
  6. // https://github.com/ant-design/ant-design-mobile/issues/163
  7. const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
  8. let wrapProps;
  9. if (isIPhone) {
  10.   wrapProps = {
  11.     onTouchStart: e => e.preventDefault(),
  12.   };
  13. }
  15. const iconList = [
  16.   { icon: <img src="https://zos.alipayobjects.com/rmsportal/WmEzpOsElbbvgmrexFSH.png" alt="icon" />, title: '发送给朋友' },
  17.   { icon: <img src="https://zos.alipayobjects.com/rmsportal/HssPJKvrjEByyVWJIFwl.png" alt="icon" />, title: '新浪微博' },
  18.   { icon: <img src="https://zos.alipayobjects.com/rmsportal/HCGowLrLFMFglxRAKjWd.png" alt="icon" />, title: '生活圈' },
  19.   { icon: <img src="https://zos.alipayobjects.com/rmsportal/LeZNKxCTkLHDWsjFfqqn.png" alt="icon" />, title: '微信好友' },
  20.   { icon: <img src="https://zos.alipayobjects.com/rmsportal/YHHFcpGxlvQIqCAvZdbw.png" alt="icon" />, title: 'QQ' },
  21.   { icon: <Icon type={require('./refresh.svg')} />, title: '刷新' },
  22.   { icon: <Icon type={require('./link.svg')} />, title: '链接' },
  23.   { icon: <Icon type={require('./complaints.svg')} />, title: '投诉' },
  24. ];
  26. class Test extends React.Component {
  27.   constructor() {
  28.     super();
  29.     this.state = {
  30.       clicked: 'none',
  31.       clicked1: 'none',
  32.       clicked2: 'none',
  33.     };
  34.   }
  35.   showActionSheet = () => {
  36.     const BUTTONS = ['操作一', '操作二', '操作三', '删除', '取消'];
  37.     ActionSheet.showActionSheetWithOptions({
  38.       options: BUTTONS,
  39.       cancelButtonIndex: BUTTONS.length - 1,
  40.       destructiveButtonIndex: BUTTONS.length - 2,
  41.       // title: '标题',
  42.       message: '我是描述我是描述',
  43.       maskClosable: true,
  44.       'data-seed': 'logId',
  45.       wrapProps,
  46.     },
  47.     (buttonIndex) => {
  48.       this.setState({ clicked: BUTTONS[buttonIndex] });
  49.     });
  50.   }
  51.   showShareActionSheet = () => {
  52.     const icons = [...iconList];
  53.     icons.length = 4;
  54.     ActionSheet.showShareActionSheetWithOptions({
  55.       options: icons,
  56.       // title: '标题',
  57.       message: '我是描述我是描述',
  58.       className: 'my-action-sheet',
  59.     },
  60.     (buttonIndex) => {
  61.       this.setState({ clicked1: buttonIndex > -1 ? icons[buttonIndex].title : 'cancel' });
  62.       // also support Promise
  63.       return new Promise((resolve) => {
  64.         Toast.info('1000ms 后关闭');
  65.         setTimeout(resolve, 1000);
  66.       });
  67.     });
  68.   }
  69.   showShareActionSheetMulpitleLine = () => {
  70.     const icons = [[...iconList], [iconList[5], iconList[6], iconList[7]]];
  71.     ActionSheet.showShareActionSheetWithOptions({
  72.       options: icons,
  73.       // title: '标题',
  74.       message: '我是描述我是描述',
  75.       className: 'my-action-sheet',
  76.     },
  77.     (buttonIndex, rowIndex) => {
  78.       this.setState({ clicked2: buttonIndex > -1 ? icons[rowIndex][buttonIndex].title : 'cancel' });
  79.     });
  80.   }
  81.   render() {
  82.     return (<div className="actionSheetContainer">
  83.       <div style={{ margin: '0.15rem 0' }}>
  84.         <Button onClick={this.showActionSheet}>默认状态</Button>
  85.       </div>
  86.       <div style={{ margin: '0.15rem 0' }}>
  87.         <Button onClick={this.showShareActionSheet}>分享功能</Button>
  88.       </div>
  89.       <div style={{ margin: '0.15rem 0' }}>
  90.         <Button onClick={this.showShareActionSheetMulpitleLine}>带多行按钮的分享功能</Button>
  91.       </div>
  92.     </div>);
  93.   }
  94. }
  96. ReactDOM.render(<Test />, mountNode);
  1. .actionSheetContainer {
  2.   margin: 0 0.3rem;
  3. }
  5. .my-action-sheet .am-action-sheet-share-list-item-icon img {
  6.   width: 0.72rem;
  7. }

ActionSheet动作面板 - 图1

API

适用平台：WEB、React-Native

static showActionSheetWithOptions(options: Object, callback: Function)

显示 action sheet，options对象必须包含以下的一个或者多个：

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

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

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

  • title (string) - 顶部标题

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

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

callback函数支持返回 Promise (web only)

static showShareActionSheetWithOptions(options: Object, callback: Function)

显示分享 action sheet，options对象必须包含以下的一个或者多个：

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

    • 注意：iconName为 Icon 组件里的某个 type 值，它会覆盖icon属性设置 (icon属性用于设置自定义内容)

    • 可以是二维数组，能显示多行按钮，例如[[{icon,title},{icon,title}], [{icon,title},{icon,title}]]表示两行两列。当为二维数组时callback有两个参数，第一个为列序列、第二个为行序列。

  • cancelButtonText (string)(web only) - 取消按钮文案，默认为取消

  • title (string) - 顶部标题

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

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

callback函数支持返回 Promise (web only)

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