@capacitor/action-sheet
操作表 API 提供对原生操作表的访问,操作表从屏幕底部弹出,显示用户可以采取的操作。
安装
npm install @capacitor/action-sheet
npx cap sync
变量
此插件将使用以下项目变量(在您的应用程序的 variables.gradle
文件中定义)
androidxMaterialVersion
:com.google.android.material:material
的版本(默认:1.10.0
)
PWA 说明
PWA 元素 是操作表插件工作所必需的。
示例
import { ActionSheet, ActionSheetButtonStyle } from '@capacitor/action-sheet';
const showActions = async () => {
const result = await ActionSheet.showActions({
title: 'Photo Options',
message: 'Select an option to perform',
options: [
{
title: 'Upload',
},
{
title: 'Share',
},
{
title: 'Remove',
style: ActionSheetButtonStyle.Destructive,
},
],
});
console.log('Action Sheet result:', result);
};
API
showActions(...)
showActions(options: ShowActionsOptions) => Promise<ShowActionsResult>
显示一个操作表样式的模态窗口,其中包含用户可以选择的不同选项。
参数 | 类型 |
---|---|
options | ShowActionsOptions |
**返回:** Promise<ShowActionsResult>
自 1.0.0
接口
ShowActionsResult
属性 | 类型 | 描述 | 自 |
---|---|---|---|
index | number | 单击选项的索引(从零开始) | 1.0.0 |
ShowActionsOptions
属性 | 类型 | 描述 | 自 |
---|---|---|---|
title | string | 操作表的标题。 | 1.0.0 |
message | string | 在标题下显示的消息。此选项仅在 iOS 上受支持。 | 1.0.0 |
options | ActionSheetButton[] | 用户可以选择的操作。 | 1.0.0 |
ActionSheetButton
属性 | 类型 | 描述 | 自 |
---|---|---|---|
title | string | 选项的标题 | 1.0.0 |
style | ActionSheetButtonStyle | 选项的样式。此选项仅在 iOS 上受支持。 | 1.0.0 |
icon | string | 选项的图标(ionicon 命名约定)。此选项仅在 Web 上受支持。 | 1.0.0 |
枚举
ActionSheetButtonStyle
成员 | 值 | 描述 | 自 |
---|---|---|---|
默认值 | 'DEFAULT' | 选项的默认样式。 | 1.0.0 |
Destructive | 'DESTRUCTIVE' | 用于破坏性选项的样式。 | 1.0.0 |
Cancel | 'CANCEL' | 用于取消操作表的选项的样式。如果使用,应该在最新的可用选项上。 | 1.0.0 |