@capacitor/action-sheet
Action Sheet API 提供对原生 Action Sheet 的访问,这些组件从屏幕底部弹出,显示用户可以执行的操作。
安装
npm install @capacitor/action-sheet@latest-7
npx cap sync
变量
此插件将使用以下项目变量(在您的应用的 variables.gradle 文件中定义):
androidxMaterialVersion:com.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 | |
返回值:
Promise<ShowActionsResult>
起始版本: 1.0.0
接口
ShowActionsResult
| 属性 | 类型 | 描述 | 起始版本 |
|---|---|---|---|
index | number | 所点击选项的索引(从零开始) | 1.0.0 |
ShowActionsOptions
| 属性 | 类型 | 描述 | 起始版本 |
|---|---|---|---|
title | string | Action Sheet 的标题。 | 1.0.0 |
message | string | 在标题下方显示的消息。此选项仅在 iOS 上支持。 | 1.0.0 |
options | ActionSheetButton[] | 用户可选择的选项。 | 1.0.0 |
ActionSheetButton
| 属性 | 类型 | 描述 | 起始版本 |
|---|---|---|---|
title | string | 选项的标题 | 1.0.0 |
style | | 选项的样式。此选项仅在 iOS 上支持。 | 1.0.0 |
icon | string | 选项的图标(遵循 ionicon 命名约定)。此选项仅在 Web 上支持。 | 1.0.0 |
枚举
ActionSheetButtonStyle
| 成员 | 值 | 描述 | 起始版本 |
|---|---|---|---|
Default | 'DEFAULT' | 选项的默认样式。 | 1.0.0 |
Destructive | 'DESTRUCTIVE' | 用于破坏性操作的样式。 | 1.0.0 |
Cancel | 'CANCEL' | 用于取消 Action Sheet 的选项的样式。如果使用,应放在最后一个可用选项上。 | 1.0.0 |