ActionSheet动作面板

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

基本用法

最简单的用法。

API

showActionSheetWithOptions(options: Object, callback: Function)

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

  • options (array of strings) - 按钮标题列表 (required)
  • cancelButtonIndex (int) - 按钮列表中取消按钮的索引位置
  • destructiveButtonIndex (int) - 按钮列表中破坏性按钮（一般为删除）的索引位置
  • title (string) - 顶部标题
  • maskClosable (bool) - 点击蒙层是否允许关闭，默认允许

callback函数支持返回 Promise

showShareActionSheetWithOptions(options: Object, callback: Function)

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

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

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

  • title (string) - 顶部标题

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

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

  • callback函数支持返回 Promise

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

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

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

close() - programmatically close.

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

  1. constructor(actionSheet: ActionSheetService) {
  2.   const ref: ActionSheetService = actionSheet.showShareActionSheetWithOptions(
  3.       {
  4.         options: this.dataList,
  5.         title: 'action-title',
  6.         message: 'I am description, description, description'
  7.       },
  8.       buttonIndex => {
  9.         return new Promise(resolve => {
  10.           setTimeout(resolve, 1000);
  12.       }
  13.     );
  14.   ref.close(); // 或 ref.destroy(); 将直接销毁对话框

ActionSheetRef

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