メインコンテンツにスキップ
バージョン: v8

@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 Elements が必要です。

例​

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>

ユーザーが選択できるさまざまなオプションを持つ、アクションシートスタイルのモーダルを表示します。

パラメータ型
optionsShowActionsOptions

戻り値: Promise<ShowActionsResult>

バージョン 1.0.0

インターフェース​

ShowActionsResult​

プロパティ型説明バージョン
index数値クリックされたオプションのインデックス（0から始まる）1.0.0

ShowActionsOptions​

プロパティ型説明バージョン
title文字列アクションシートのタイトル。1.0.0
message文字列タイトルの下に表示するメッセージ。このオプションはiOSでのみサポートされています。1.0.0
optionsActionSheetButton[]ユーザーが選択できるオプション。1.0.0

ActionSheetButton​

プロパティ型説明バージョン
title文字列オプションのタイトル1.0.0
styleActionSheetButtonStyleオプションのスタイル。このオプションはiOSでのみサポートされています。1.0.0
icon文字列オプションのアイコン（ioniconの命名規則を使用）。このオプションはWebでのみサポートされています。1.0.0

列挙型​

ActionSheetButtonStyle​

メンバー値説明バージョン
デフォルト'DEFAULT'オプションのデフォルトスタイル。1.0.0
破壊的'DESTRUCTIVE'破壊的なオプションに使用するスタイル。1.0.0
キャンセル'CANCEL'アクションシートをキャンセルするオプションに使用するスタイル。使用する場合、最後に使用可能なオプションに設定する必要があります。1.0.0

目次

このページを編集