メインコンテンツまでスキップ
バージョン: v9

@capacitor/action-sheet

アクションシートAPIは、ネイティブなアクションシートへのアクセスを提供します。アクションシートは、画面の下部に表示され、ユーザーが取ることのできるアクションを表示します。

Install

npm install @capacitor/action-sheet
npx cap sync

Variables

このプラグインは以下のプロジェクト変数(アプリの variables.gradle ファイルで定義)を使用します:

  • androidxMaterialVersion: com.google.android.material:material のバージョン(デフォルト: 1.13.0

PWAに関する注意事項

Action Sheetプラグインが動作するにはPWA Elementsが必要です。

Example

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>

Show an Action Sheet style modal with various options for the user to select.

ParamType
options
ShowActionsOptions

Returns:

Promise<ShowActionsResult>

Since: 1.0.0


Interfaces

ShowActionsResult

PropTypeDescriptionSince
indexnumberThe index of the clicked option (Zero-based), or -1 if the Action Sheet was canceled. On iOS, if there is a button with ActionSheetButtonStyle.Cancel, and user clicks outside the Action Sheet, the index of the Cancel button is returned.1.0.0
canceledbooleanTrue if the Action Sheet was canceled by user; False otherwise. On Web, requires having @ionic/pwa-elements version 3.4.0 or higher.8.1.0

ShowActionsOptions

PropTypeDescriptionDefaultSince
titlestringThe title of the Action Sheet.1.0.0
messagestringA message to show under the title. This option is only supported on iOS.1.0.0
optionsActionSheetButton[]Options the user can choose from.1.0.0
cancelablebooleanIf true, the Action Sheet is canceled when clicked outside; If false, it is not. On iOS, it's not available if there is a button with ActionSheetButtonStyle.Cancel, or on iOS 26+. In those cases, the Action Sheet is always cancelable by clicking outside of it. On Web, requires having @ionic/pwa-elements version 3.4.0 or higher.false8.1.0

ActionSheetButton

PropTypeDescriptionSince
titlestringThe title of the option1.0.0
style
ActionSheetButtonStyle
The style of the option This option is only supported on iOS.1.0.0
iconstringIcon for the option (ionicon naming convention) This option is only supported on Web.1.0.0

Enums

ActionSheetButtonStyle

MembersValueDescriptionSince
Default'DEFAULT'Default style of the option.1.0.0
Destructive'DESTRUCTIVE'Style to use on destructive options.1.0.0
Cancel'CANCEL'Style to use on the option that cancels the Action Sheet. If used, should be on the latest available option. On iOS 26+ is not displayed, the Action Sheet is cancelable by tapping outside.1.0.0