跳到主要内容
版本:v7

@capacitor/action-sheet

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

安装

npm install @capacitor/action-sheet@latest-7
npx cap sync

变量

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

  • androidxMaterialVersioncom.google.android.material:material 的版本(默认值:1.12.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('Action Sheet 结果:', result);
};

API

showActions(...)

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

显示一个 Action Sheet 风格的模态框,其中包含供用户选择的各种选项。

参数类型
options
ShowActionsOptions

返回值:

Promise<ShowActionsResult>

起始版本: 1.0.0


接口

ShowActionsResult

属性类型描述起始版本
indexnumber所点击选项的索引(从零开始)1.0.0

ShowActionsOptions

属性类型描述起始版本
titlestringAction Sheet 的标题。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

枚举

ActionSheetButtonStyle

成员描述起始版本
Default'DEFAULT'选项的默认样式。1.0.0
Destructive'DESTRUCTIVE'用于破坏性操作的样式。1.0.0
Cancel'CANCEL'用于取消 Action Sheet 的选项的样式。如果使用,应放在最后一个可用选项上。1.0.0