ActionSheet动作面板

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

规则

• 提供清晰的退出按钮。
• 可高亮破坏性操作，e.g. 将『删除』处理成红色文本。
• 不要放置过多内容，避免面板纵向滚动。

代码演示

基本用法

最简单的用法。

import { Component } from '@angular/core';
import { ActionSheetService, ToastService } from 'ng-zorro-antd-mobile';
import { en_US, ru_RU, zh_CN, sv_SE, da_DK } from 'ng-zorro-antd-mobile';
@Component({
  selector: 'demo-action-sheet-basic',
  template: `
    <WingBlank>
      <div Button (onClick)="showActionSheet(message)">showActionSheet</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="showShareActionSheet()">showShareActionSheet</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="showShareActionSheetMulpitleLine()">showShareActionSheetMulpitleLine</div>
      <ng-template #message>
        <div class="am-action-sheet-message">123</div>
      </ng-template>
    </WingBlank>
  `
})
export class DemoActionSheetBasicComponent {
  dataList = [
    { url: 'OpHiXAcYzmPQHcdlLFrc', title: '发送给朋友' },
    { url: 'wvEzCMiDZjthhAOcwTOu', title: '新浪微博' },
    { url: 'cTTayShKtEIdQVEMuiWt', title: '生活圈' },
    { url: 'umnHwvEgSyQtXlZjNJTt', title: '微信好友' },
    { url: 'SxpunpETIwdxNjcJamwB', title: 'QQ' }
  ].map(obj => ({
    icon: `<img src="https://gw.alipayobjects.com/zos/rmsportal/${obj.url}.png" style="width:36px"/>`,
    title: obj.title
  }));
  constructor(private _actionSheet: ActionSheetService, private _toast: ToastService) {}
  showActionSheet = message => {
    const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Delete', 'Cancel'];
    this._actionSheet.showActionSheetWithOptions(
      {
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        title: 'title',
        message: message,
        maskClosable: true
      },
      buttonIndex => {
        console.log(buttonIndex);
      }
    );
  }
  showShareActionSheet = () => {
    this._actionSheet.showShareActionSheetWithOptions(
      {
        options: this.dataList,
        message: 'I am description, description, description',
        locale: zh_CN
      },
      buttonIndex => {
        return new Promise(resolve => {
          this._toast.info('closed after 1000ms');
          setTimeout(resolve, 1000);
        });
      }
    );
  }
  showShareActionSheetMulpitleLine = () => {
    const data = [[...this.dataList, this.dataList[2]], [this.dataList[3], this.dataList[4]]];
    this._actionSheet.showShareActionSheetWithOptions(
      {
        options: data,
        message: 'I am description, description, description',
        locale: en_US
      },
      (buttonIndex, rowIndex) => {
        console.log(buttonIndex);
      }
    );
  }
}

API

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

callback函数支持返回 Promise

showShareActionSheetWithOptions(options: Object, callback: Function)

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

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

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

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

• title (string) - 顶部标题

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

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

• locale - 国际化，可覆盖全局[LocaleProvider](https://ng.mobile.ant.design/components/locale-provider/zh)的配置 | Object: { dismissText }

• callback函数支持返回 Promise

showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function)

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

• options:
  • message(string): 顶部标题下的简要消息
  • title(string): 顶部标题
  • url(string): 分享的 url
  • excludedActivityTypes(array): 指定在actionsheet中不显示的活动
• Callback:
  • failureCallback(error): 分享失败调用；
  • successCallback(completed, method)：分享成功调用;

close() - programmatically close.

以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

constructor(actionSheet: ActionSheetService) {
  const ref: ActionSheetService = actionSheet.showShareActionSheetWithOptions(
      {
        options: this.dataList,
        title: 'action-title',
        message: 'I am description, description, description'
      },
      buttonIndex => {
        return new Promise(resolve => {
          setTimeout(resolve, 1000);
        });
      }
    );
  ref.close(); // 或 ref.destroy(); 将直接销毁对话框
}

ActionSheetRef

ActionSheetRef 对象用于控制对话框以及进行内容间的通信

通过服务方式 ActionSheetService.xxx() 创建的对话框，都会返回一个 ActionSheetRef 对象，该对象具有以下方法：