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'];
    ActionSheetService.showActionSheetWithOptions(
      {
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        title: 'title',
        message: message,
        maskClosable: true
      },
      buttonIndex => {
        console.log(buttonIndex);
      }
    );
  }
  showShareActionSheet = () => {
    ActionSheetService.showShareActionSheetWithOptions(
      {
        options: this.dataList,
        message: 'I am description, description, description',
        locale: zh_CN
      },
      buttonIndex => {
        return new Promise(resolve => {
          ToastService.info('closed after 1000ms');
          setTimeout(resolve, 1000);
        });
      }
    );
  }
  showShareActionSheetMulpitleLine = () => {
    const data = [[...this.dataList, this.dataList[2]], [this.dataList[3], this.dataList[4]]];
    ActionSheetService.showShareActionSheetWithOptions(
      {
        options: data,
        message: 'I am description, description, description',
        locale: en_US
      },
      (buttonIndex, rowIndex) => {
        console.log(buttonIndex);
      }
    );
  }
}

API

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) - 点击蒙层是否允许关闭，默认允许 callback函数支持返回 Promise

static 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的配置 | Object: { dismissText }

• callback函数支持返回 Promise

static 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)：分享成功调用;

static close() - programmatically close.