跳到主要内容
版本：v6

@capacitor/action-sheet

Action Sheet API 提供了访问原生操作表的功能，这种交互组件从屏幕底部弹出，展示用户可选择的多个操作选项。

安装​

npm install @capacitor/action-sheet
npx cap sync

变量配置​

本插件会使用以下项目变量（需在应用的 variables.gradle 文件中定义）：

  • androidxMaterialVersion: com.google.android.material:material 的版本号（默认值：1.10.0）

PWA 注意事项​

Action Sheet 插件需要配合 PWA Elements 使用。

使用示例​

import { ActionSheet, ActionSheetButtonStyle } from '@capacitor/action-sheet';

const showActions = async () => {
  const result = await ActionSheet.showActions({
    title: '图片操作',
    message: '请选择要执行的操作',
    options: [
      {
        title: '上传',
      },
      {
        title: '分享',
      },
      {
        title: '删除',
        style: ActionSheetButtonStyle.Destructive,
      },
    ],
  });

  console.log('操作表返回结果:', result);
};

API 文档​

showActions(...)​

showActions(options: ShowActionsOptions) => Promise<ShowActionsResult>

显示一个操作表模态框，提供多个选项供用户选择。

参数类型
options
ShowActionsOptions

返回值: 

Promise<ShowActionsResult>

版本: 1.0.0

Interfaces​

ShowActionsResult​

属性类型描述版本
indexnumber被点击选项的索引（从0开始计数）1.0.0

ShowActionsOptions​

属性类型描述版本
titlestring操作表的标题1.0.0
messagestring标题下方显示的提示信息（仅iOS平台支持）1.0.0
optionsActionSheetButton[]用户可选的按钮列表1.0.0

ActionSheetButton​

属性类型描述版本
titlestring按钮显示的文本1.0.0
style
ActionSheetButtonStyle
按钮的样式（仅iOS平台支持）1.0.0
iconstring按钮图标（使用ionicon命名规范，仅Web平台支持）1.0.0

Enums类型​

ActionSheetButtonStyle​

枚举值值描述版本
Default'DEFAULT'默认按钮样式1.0.0
Destructive'DESTRUCTIVE'表示破坏性操作的按钮样式（通常显示为红色）1.0.0
Cancel'CANCEL'表示取消操作的按钮样式。使用时应当放在选项列表的最底部位置。1.0.0

Contents

编辑此页