跳到主要内容
版本:v5

@capacitor/action-sheet

Action Sheet API 提供对原生操作表的访问,这些操作表从屏幕底部弹出,显示用户可以执行的操作。

安装

npm install @capacitor/action-sheet
npx cap sync

变量配置

本插件会使用以下项目变量(在应用的 variables.gradle 文件中定义):

  • androidxMaterialVersioncom.google.android.material:material 的版本号(默认值:1.8.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被点击选项的索引(从零开始)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