ActionSheet 动作面板

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

规则

  • 提供清晰的退出按钮。

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

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

代码演示

基本

  1. import { ActionSheet, WingBlank, WhiteSpace, 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. class Test extends React.Component {
  15.   constructor() {
  16.     super();
  17.     this.state = {
  18.       clicked: 'none',
  19.       clicked1: 'none',
  20.       clicked2: 'none',
  21.     };
  22.   }
  24.   dataList = [
  25.     { url: 'OpHiXAcYzmPQHcdlLFrc', title: '发送给朋友' },
  26.     { url: 'wvEzCMiDZjthhAOcwTOu', title: '新浪微博' },
  27.     { url: 'cTTayShKtEIdQVEMuiWt', title: '生活圈' },
  28.     { url: 'umnHwvEgSyQtXlZjNJTt', title: '微信好友' },
  29.     { url: 'SxpunpETIwdxNjcJamwB', title: 'QQ' },
  30.   ].map(obj => ({
  31.     icon: <img src={`https://gw.alipayobjects.com/zos/rmsportal/${obj.url}.png`} alt={obj.title} style={{ width: 36 }} />,
  32.     title: obj.title,
  33.   }));
  35.   showActionSheet = () => {
  36.     const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Delete', 'Cancel'];
  37.     ActionSheet.showActionSheetWithOptions({
  38.       options: BUTTONS,
  39.       cancelButtonIndex: BUTTONS.length - 1,
  40.       destructiveButtonIndex: BUTTONS.length - 2,
  41.       // title: 'title',
  42.       message: 'I am description, description, description',
  43.       maskClosable: true,
  44.       'data-seed': 'logId',
  45.       wrapProps,
  46.     },
  47.     (buttonIndex) => {
  48.       this.setState({ clicked: BUTTONS[buttonIndex] });
  49.     });
  50.   }
  52.   showShareActionSheet = () => {
  53.     ActionSheet.showShareActionSheetWithOptions({
  54.       options: this.dataList,
  55.       // title: 'title',
  56.       message: 'I am description, description, description',
  57.     },
  58.     (buttonIndex) => {
  59.       this.setState({ clicked1: buttonIndex > -1 ? this.dataList[buttonIndex].title : 'cancel' });
  60.       // also support Promise
  61.       return new Promise((resolve) => {
  62.         Toast.info('closed after 1000ms');
  63.         setTimeout(resolve, 1000);
  64.       });
  65.     });
  66.   }
  68.   showShareActionSheetMulpitleLine = () => {
  69.     const data = [[...this.dataList, this.dataList[2]], [this.dataList[3], this.dataList[4]]];
  70.     ActionSheet.showShareActionSheetWithOptions({
  71.       options: data,
  72.       message: 'I am description, description, description',
  73.     },
  74.     (buttonIndex, rowIndex) => {
  75.       this.setState({ clicked2: buttonIndex > -1 ? data[rowIndex][buttonIndex].title : 'cancel' });
  76.     });
  77.   }
  79.   showActionSheetBadge = () => {
  80.     const BUTTONS = ['Operation1', 'Operation2', 'Operation3', 'Operation4', 'Operation5', 'Delete', 'Cancel'];
  81.     const BADGES = [{
  82.       index: 1,
  83.       dot: true,
  84.     }, {
  85.       index: 2,
  86.       text: 3100,
  87.     }, {
  88.       index: 3,
  89.       text: '推荐',
  90.     }, {
  91.       index: 4,
  92.       text: '···',
  93.     }];
  94.     ActionSheet.showActionSheetWithOptions({
  95.       options: BUTTONS,
  96.       cancelButtonIndex: BUTTONS.length - 1,
  97.       destructiveButtonIndex: BUTTONS.length - 2,
  98.       badges: BADGES,
  99.       // title: 'title',
  100.       message: 'I am description, description, description',
  101.       maskClosable: true,
  102.       'data-seed': 'logId',
  103.       wrapProps,
  104.     },
  105.     (buttonIndex) => {
  106.       this.setState({ clicked: BUTTONS[buttonIndex] });
  107.     });
  108.   }
  110.   render() {
  111.     return (<WingBlank>
  112.       <Button onClick={this.showActionSheet}>showActionSheet</Button>
  113.       <WhiteSpace />
  114.       <Button onClick={this.showActionSheetBadge}>showActionSheet&Badge</Button>
  115.       <WhiteSpace />
  116.       <Button onClick={this.showShareActionSheet}>showShareActionSheet</Button>
  117.       <WhiteSpace />
  118.       <Button onClick={this.showShareActionSheetMulpitleLine}>showShareActionSheetMulpitleLine</Button>
  119.     </WingBlank>);
  120.   }
  121. }
  123. ReactDOM.render(<Test />, mountNode);

ActionSheet动作面板 - 图1

API

static showActionSheetWithOptions(options: Object, callback: Function)

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

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

  • badges (array of {…Badges, index: number}) - 徽标数列表

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

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

  • title (string) - 顶部标题

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

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

callback函数支持返回 Promise

static showShareActionSheetWithOptions(options: Object, callback: Function)

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

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

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

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

  • title (string) - 顶部标题

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

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

callback函数支持返回 Promise

static close() - programmatically close.