Ionic Action Sheet: A Complete Guide for 2026

あなたは現在、2つの状況のいずれかにいるかもしれません。いずれかの状況では、画面に余分なボタンを詰め込まないように、少数のコンテキストアクションをきれいに表示する必要があるかもしれません。もう一方の状況では、既にIonicアクションシートを実装し、簡単なデモバージョンと実稼動用の実装が異なることを発見したかもしれません。

そのギャップは重要です。アクションシートは単純に見えますが、インタラクションデザイン、フレームワークAPI、プラットフォームの動作、アクセシビリティ、リリース後のメンテナンスの交差点に位置しています。アクションシートを単にポップアップにボタンを追加するだけでは、通常はQAの後期で破綻する部分を無視することになります。

イオニックアクションシートの導入
- なぜチームはそれにたどり着くのか
APIとアクションシートコントローラーの理解
Angular、React、Vueの実装例
CSSを使用したカスタマイズとスタイリング
影のパーツを使用して精度が必要な場合
- 高度なトピックとプラットフォームの考慮事項
- Webコンポーネントまたはネイティブプラグイン
プラットフォームモードとアクセシビリティの詳細

イオニックアクションシートの導入

イオニックアクションシートは、ユーザーが現在のコンテキストに関連付けられた小さく集中した選択を行う必要がある場合に、適切なツールです。ドロップアウトを削除する。プロフィール写真を置き換える。ドキュメントを保存、共有、またはアーカイブする。これらのアクションは重要ですが、メインレイアウトに永久的なスペースを占める価値はありません。

In Ionic、パターンは長い間一貫してきた。 $ionicActionSheet Earlier Ionic apps used the show() service, which TutorialsPoint describes as a pane that slides up from the bottom of the screen and is shown by injecting the service and calling ion-action-sheetin the controller. Modern apps use , but the interaction model is still recognizably the same, which makes the component one of the clearer examples of Ionic preserving mobile UI patterns across framework generations in.

the Ionic 1 action sheet documentation summary from TutorialsPoint

That continuity is useful in real projects. It means the component isn’t a trendy abstraction that changed every release. It’s a stable mobile-first pattern that maps well to iOS and Android option menus, and it still feels natural in Angular, React, and Vue projects.

Why teams keep reaching for it

An action sheet works well when the user already understands the context and only needs a compact list of next steps. It works poorly when the user needs explanation, validation, or multiple form fields.

A simple rule helps: Use an action sheet
for short decision menus tied to a specific item. Use an alert for other cases. When you need confirmation with minimal options.
モーダルを使用します。 When the user needs more content, inputs, or scrolling.

実用的なルール: If the button labels can’t stand on their own without extra paragraph text, don’t force the interaction into an action sheet.

In hybrid apps, this pattern also fits neatly into the web-to-native model. The UI is simple enough to render in the web layer, while still feeling native on touch devices. If your team is building on Capacitor and wants a clearer mental model of that boundary, this breakdown of how Capacitor bridges web and native code __CAPGO_KEEP_0__と__CAPGO_KEEP_1__の境界を明確にするために、__CAPGO_KEEP_0__がウェブとネイティブをどのように結びついているかを理解することは、行動シートがどこに住むべきかを決定するのに役立ちます。

APIと行動シートコントローラー

行動シートは、単なるインラインコンポーネントとして考えなくても簡単に理解できるようになります。

A flowchart diagram explaining the architecture, configuration, and API components of an Action Sheet controller.

Why the API is controller driven

In 日常の Ionic の作業では、コントローラーベースのアプローチは、通常、最も綺麗なオプションです。アクションシートは一時的なものなので、メニューがタップされた後、オーバーフローアイコンにのみ表示されるため、大きなテンプレートマークアップのブロックがページに残りたくありません。

公式の Ionic ドキュメントでは、アクションシートを「ユーザーによる閉じる必要があるモーダルダイアログ」と定義し、閉じるライフサイクルメソッド（例えば「」）を使用して、選択後のロジックを実装しています。「」は、ユーザーがアクションシートを閉じた後、どのようにアプリケーションを構築するかを示しています。最初に表示し、閉じた後は反応してください。タイミングに関する仮定に依存した批判的なロジックを組み込まないでください。実際に重要なオプション onDidDismiss ほとんどのチームは、__CAPGO_KEEP_0__ の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。 Ionic Action Sheet API docs. That design tells you how to structure your code. Present first. React after dismissal. Don’t wire critical logic to assumptions about timing.

なぜ重要か

API

__CAPGO_KEEP_0__	__CAPGO_KEEP_0__	__CAPGO_KEEP_0__
`header`	ヘッダーラベルを設定します。	状況によってアクションが曖昧になる場合に役立つ
`subHeader`	追加テキストを表示	アクションが明確な説明が必要な場合に便利です。
`buttons`	利用可能なアクションを定義します。	この部分では、動作と視覚的な強調が実現されます。
`cssClass`	カスタムクラスを追加します。	scoped stylingのための重要な設定はグローバルなハックではなく
`mode`	iOSまたはMDスタイリングを強制します。	プラットフォーム間の制御されたテストに役立つ

ボタン設定は、そこでよく間違いが起きる場所です。一般的なボタンには以下のような設定が含まれます。

text __CAPGO_KEEP_0__の可視ラベルです。
icon 視覚的なクイューが必要な場合。
handler 即時コールバックロジックのために。
role 意味的な動作とプラットフォームのスタイリングのために。

role __CAPGO_KEEP_0__は装飾的ではありません。使用 destructive 危険なアクションの場合、削除など。使用 cancel エスケープパス用。ロールは、選択肢を提示するアクションシートと、プレッシャー下でユーザーが読むリストの表示に影響を与えます。

危険なアクションは選択肢の端に置くべきで、同じ視覚的重みを持つ中立的なアクションと混ぜるべきではありません。

拒否は契約の一部です。

よくあるバグは、開発者がアクションシートを開き、ハンドラの結果が十分だと仮定し、オーバーレイが完全に閉じる前にナビゲーションやステートの更新をトリガーすることです。その結果、不規則なトランジション、古いステート、またはテストでレース条件が生じることがあります。

ライフサイクルを意図的に使用してください。

シートを作成します。
await present().
await onDidDismiss().
返されたロールまたはデータを読みます。
Trigger the next action.

That pattern is boring, and that’s why it works.

Here’s a plain Angular-style example of the shape:

const sheet = await this.actionSheetController.create({
  header: 'Photo options',
  buttons: [
    {
      text: 'Take Photo',
      icon: 'camera',
      handler: () => {
        console.log('take photo');
      }
    },
    {
      text: 'Delete Photo',
      role: 'destructive',
      icon: 'trash'
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
  ]
});

await sheet.present();

const result = await sheet.onDidDismiss();
console.log('dismissed with role:', result.role);

If you remember only one thing from the API, remember this: an ionic action sheet is not finished when it appears. It’s finished when it dismisses.

Implementation Examples for Angular React and Vue

The syntax changes across frameworks, but the mental model doesn’t. Every version creates the same interaction: the user taps the avatar, sees options for the profile photo, chooses one action, and the app responds after the overlay closes.

Three mobile app UI screen designs labeled Angular, React, and Vue displaying a food delivery interface.

If you’re also handling offline states for media uploads, this guide to creating an offline screen in Vue Angular React pairs well with the examples below because photo actions often lead straight into network-dependent flows.

Angular example

In Ionic Angular、最も一般的なアプローチは、コンポーネントまたはページに ActionSheetController をインジェクトすることです。

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-profile-photo',
  template: `
    <ion-button expand="block" (click)="openPhotoActions()">
      Profile Photo Options
    </ion-button>
  `
})
export class ProfilePhotoComponent {
  constructor(private actionSheetController: ActionSheetController) {}

  async openPhotoActions() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Profile photo',
      subHeader: 'Choose what to do next',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            console.log('Open camera flow');
          }
        },
        {
          text: 'Choose from Library',
          icon: 'images',
          handler: () => {
            console.log('Open photo library flow');
          }
        },
        {
          text: 'Remove Current Photo',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Remove current photo');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });

    await actionSheet.present();

    const { role } = await actionSheet.onDidDismiss();
    console.log('Action sheet dismissed with role:', role);
  }
}

Angular チームは、通常、2 つの場所で間違いを犯します。ボタンハンドラーにロジックを多く移動する、または UI トランジションを調整するより安全な場所である解決策のプロミスを忘れることです。

React の例

In Ionic React、 useIonActionSheet gives you a compact functional API that fits naturally with event handlers.

import React from 'react';
import { IonButton, useIonActionSheet } from '@ionic/react';

const ProfilePhotoActions: React.FC = () => {
  const [presentActionSheet] = useIonActionSheet();

  const openPhotoActions = () => {
    presentActionSheet({
      header: 'Profile photo',
      subHeader: 'Choose what to do next',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            console.log('Open camera flow');
          }
        },
        {
          text: 'Choose from Library',
          icon: 'images',
          handler: () => {
            console.log('Open photo library flow');
          }
        },
        {
          text: 'Remove Current Photo',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Remove current photo');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ],
      onDidDismiss: (event) => {
        console.log('Dismissed with role:', event.detail.role);
      }
    });
  };

  return (
    <IonButton expand="block" onClick={openPhotoActions}>
      Profile Photo Options
    </IonButton>
  );
};

export default ProfilePhotoActions;

React の API は、エラスティックですが、同じルールが適用されます。即時のハンドラーは、選択されたアクションに焦点を当ててください。クリーンアップ、分析、またはフォローアップ UI ステートのために解決策のコールバックを使用してください。

Vue の例

In Ionic Vue、 actionSheetController は、組成 API 内できれいに機能します。

<template>
  <ion-button expand="block" @click="openPhotoActions">
    Profile Photo Options
  </ion-button>
</template>

<script setup lang="ts">
import { IonButton, actionSheetController } from '@ionic/vue';

const openPhotoActions = async () => {
  const actionSheet = await actionSheetController.create({
    header: 'Profile photo',
    subHeader: 'Choose what to do next',
    buttons: [
      {
        text: 'Take Photo',
        icon: 'camera',
        handler: () => {
          console.log('Open camera flow');
        }
      },
      {
        text: 'Choose from Library',
        icon: 'images',
        handler: () => {
          console.log('Open photo library flow');
        }
      },
      {
        text: 'Remove Current Photo',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Remove current photo');
        }
      },
      {
        text: 'Cancel',
        role: 'cancel'
      }
    ]
  });

  await actionSheet.present();

  const result = await actionSheet.onDidDismiss();
  console.log('Dismissed with role:', result.role);
};
</script>

Vue プロジェクトでは、副作用を保持する場所が実用的には異なります。アプリがカメラまたはファイルピッカーロジックを使用する場合、ハンドラーからそれらを呼び出し、コントローラー code を薄くしてください。

フレームワーク固有の code を小さくしてください。カメラ、アップロード、削除、分析のビジネスロジックは、行動シートの設定とは別の場所に置いてください。

カスタマイズとスタイリング用のCSS

デフォルトのイオニックアクションシートのスタイリングは、プロトタイプ用にはよく十分ですが、ブランド化されたアプリ用ではよくありません。デザインがより密なスペース、異なるフォント、より明確な破棄アクションを必要とする場合には、十分ではありません。

Appleテーマのグラフィックデザインの例を使用した6つの異なるCSSカスタマイズとスタイリングのテクニックを示すウェブデザインプレゼンテーションスライド。

チームがアプリがより一般的なウェブラッパーではなく、よりネイティブな製品に感じさせたい場合、この記事ネイティブアプリの見た目のための基本的なJSとCSSの設定アクションシートのスタイリングの有用な相談相手です。

cssClassからglobal overrideを始めましょう

最初のスタイリングルールは簡単です。アプリ内のすべてのアクションシートをターゲットにする必要はありません。特定のバリアントをスコープするために cssClass を使用してください。そのバリアントをスタイリングしてみましょう:

const sheet = await actionSheetController.create({
  header: 'File actions',
  cssClass: 'file-actions-sheet',
  buttons: [
    { text: 'Rename' },
    { text: 'Delete', role: 'destructive' },
    { text: 'Cancel', role: 'cancel' }
  ]
});

そのアプローチは、後でセレクターを追跡するのではなく、よりスケーラブルです。

.file-actions-sheet {
  --background: #101418;
  --color: #f5f7fa;
  --backdrop-opacity: 0.4;
}

カスタムプロパティを使用して広範なテーマ設定

__CAPGO_KEEP_0__

CSSカスタムプロパティは、コンポーネント構造を戦うことなく、全体的な雰囲気を最速で変更する方法です。

一般的な使用例は次のとおりです。

背景色とテキスト色 アプリが暗いカスタムパレットを持つ場合に使用します。
バックドロップの不透明度 デフォルトの暗めの影が弱すぎるか重すぎる場合に使用します。
スペーシングとサイズ 視覚的な密度がアプリのインターフェイスと一致する場合に使用します。

.file-actions-sheet {
  --background: #1b1f24;
  --color: #ffffff;
  --backdrop-opacity: 0.32;
  --button-color: #dce3ea;
  --button-background-hover: #2a3138;
}

影のパーツを使用する必要がある場合

デザインが特定の変更を求める場合、カスタムプロパティでは十分ではありません。その場合はShadow Partsが役立ちます。内部のアクションシートの領域を直接スタイルすることができます。

.file-actions-sheet::part(container) {
  border-radius: 18px 18px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

.file-actions-sheet::part(button) {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.file-actions-sheet::part(backdrop) {
  backdrop-filter: blur(4px);
}

通常は、コンポーネントを過度にスタイリングすることは効果的ではありません。システムレベルの選択メニューの雰囲気を失うことになります。

必要なのは、リッチなカード、サムネール、長い説明、複雑な行レイアウトなど、複雑なレイアウトの場合、行動シートのパターンを超えていることになります。

高度なトピックとプラットフォームの考慮事項

生産的なアクションシートは、ほとんどのチュートリアルが認めるよりも大きな決定空間内に存在します。ただし、ボタンラベルを選択するだけでなく、オーバーレイがIonicのWeb層によってレンダリングされるか、ネイティブUIに委ねられるか、プラットフォーム固有の動作の強さ、そしてシートがすべてのユーザーにとって理解できるようにする方法についても決定する必要があります。

黒の背景に3Dの抽象的な形状と緑の背景に石の背景に果物の画像

Webコンポーネントまたはネイティブプラグイン

標準的なIonicアプリを構築している場合 ion-action-sheet 通常、デフォルトです。スタイルを簡単に変更でき、残りのアプリのオーバーレイシステムと一貫して動作し、柔軟性があります。

あなたのアプリがCapacitorベースであなたがホストOSがシートをレンダリングしたい場合、ネイティブルートは @capacitor/action-sheet ionicドキュメントはプラグインを showActions(options) -> Promise<ShowActionsResult>、インストールされた npm install @capacitor/action-sheet 、syncされた npx cap sync、そして 、を備えていることを記載しています。ただし、PWA ElementsはWebとPWAコンテキストで必要です in the Capacitor アクションシートプラグインドキュメント.

その結果、実用的な取引表が得られます。

選択	強み	コスト
`ion-action-sheet`	より簡単なテーマ設定と共有されたWeb UI パターン	ネイティブの忠実性がわずかに低下
`@capacitor/action-sheet`	ホスト OS のレンダリングとプラットフォームの強い感覚	ブラウザとPWA コンテキストで実装の制約が増える

視覚的的一貫性がアプリに重要な場合、Web コンポーネントを使用してください。プラットフォームの忠実性が深いCSS制御よりも重要な場合、ネイティブプラグインを使用してください。

プラットフォームモードとアクセシビリティの詳細

iOSとMaterial Designモードに適応することができ、スペース、動き、全体的な視覚的なtoneに影響します。両方のモードでスタイリングが同じように動作することを前提にしないでください。両方のモードを意図的にテストし、特にチームがすべてのプラットフォームで単一のモードを強制する場合に特別に。

アクセシビリティも見落とされることがあります。アクションシートが小さく感じるからです。基本的なことはまだ重要です：

明確なボタンテキストを使用 コンテキストから外れたにもかかわらず意味がわかるように。
リスクのあるアクション destructive 予約 意図を伝えるようにインターフェイスがコミュニケーションをとるように。
明示的 cancel ユーザーが明確な出口のパスを持つように。 装飾的な曖昧さを避ける
類似の多くのアクションが存在するが、非常に異なる結果をもたらす場合。 __CAPGO_KEEP_0__

A screen reader または認知負荷制限のユーザーは、ラベルの曖昧なオーバーレイを「単純」に経験しない。

native と web アプローチは異なる問題を解決する。Web コンポーネントは、外観と統合の制御を提供します。ネイティブプラグインは、プラットフォームの強い統合を提供します。どちらも自動的に優れているわけではありません。正解は、現在のアプリの痛点が視覚的一貫性、実装のスピード、またはシステムネイティブの動作であるかどうかにかかっています。

トラブルシューティングの落とし穴とライブ UI 修正の配信

ほとんどの Ionic アクションシートのバグは、最初に 3 つのボタンをワイヤアップし、シミュレーターでタップしてみると現れません。実際のナビゲーションと状態の移行と組み合わせて、スタイリングされたシートをテストしたときに現れます。

デモが動作する最初のクラスのバグ

最初のクラスのバグはタイミングです。code が閉じるのを待たずにロジックが実行されるためです。オーバーレイがアニメーション中のときにルートが変更され、またはコンポーネントのレンダリングと競合する状態の更新が見られます。

2 番目のクラスはレイアウトです。ある Ionic の問題では、iOS デバイスの特定の条件下でアクションシートが下部セーフエリアを重ねることが報告されています。特に、is 非ゼロの場合、問題の報告では、Ionic のドキュメントのデモでこの問題が再現できることも指摘されています。 --ion-safe-area-bottom このような問題は、チームが遅い QA で見逃すことが多いです。デバイスの形状、モード、カスタム CSS に依存するからです。 GitHub__CAPGO_KEEP_0__

実用的な安全領域修正

アプリがホームインジケーターエリアに近い位置でシートを表示する場合、scoped overrideを使用するのではなく、広範なグローバルパッチを使用するのではなく始めましょう。

.safe-area-sheet::part(container) {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

次に、作成するアクションシートにクラスを適用してください:

const sheet = await actionSheetController.create({
  header: 'More actions',
  cssClass: 'safe-area-sheet',
  buttons: [
    { text: 'Archive' },
    { text: 'Delete', role: 'destructive' },
    { text: 'Cancel', role: 'cancel' }
  ]
});

正しいデバイステストを行う代わりに、すべてのオーバーレイを変更することなく、具体的な場所で始めるための安全な場所を与えます。

UIの欠陥に対するライブ更新の重要性

リリースオペレーションの実際的な現実が明らかになります。安全領域の不具合、破損したパディングルール、破壊的なボタンの不良色は、JavaScriptまたはCSSで生じます。

One practical option is a live update service for Capacitor apps. For example, 一つの実用的オプションは、Capgoアプリ用のライブ更新サービスです。たとえば、__CAPGO_KEEP_0__

UI overlays are exactly the kind of feature where that safety net pays off. They’re highly visible, easy to break with small styling changes, and usually fixable without rebuilding native code.

If your team ships Ionic or Capacitor apps regularly, チームが定期的にIonicまたはCapgoアプリを配信する場合、リリースワークフローの一部として評価する価値があります。これは、ロールアウトチャネルと更新動作を制御しながら、リリース後に発生するアクションシートレイアウトのバグ、スタイリングのリグレッション、コピーのミスなどのウェブ層の修正をプッシュする方法を提供します。

2026年版イオニックアクションシート：完全ガイド

あなたが使用している場合 2026年版イオニックアクションシート：完全ガイド 計画の移行とエンタープライズオペレーションを計画するために接続する場合 Capgo エンタープライズ製品ワークフローにおけるCapgo エンタープライズイオニックエンタープライズプラグインの代替製品ワークフローにおけるイオニックエンタープライズプラグインの代替 Capgo 代替製品ワークフローにおけるCapgo 代替 Capgo コンサルティング製品ワークフローについてはCapgoコンサルティングで Capgoプレミアムサポート製品ワークフローについてはCapgoプレミアムサポートで

Ionic Action Sheet: 2026年の完全ガイド

目次

イオニックアクションシートの導入

That continuity is useful in real projects. It means the component isn’t a trendy abstraction that changed every release. It’s a stable mobile-first pattern that maps well to iOS and Android option menus, and it still feels natural in Angular, React, and Vue projects.

APIと行動シートコントローラー

Why the API is controller driven

なぜ重要か

拒否は契約の一部です。

Implementation Examples for Angular React and Vue

Angular example

React の例

Vue の例

カスタマイズとスタイリング用のCSS

cssClassからglobal overrideを始めましょう

__CAPGO_KEEP_0__

影のパーツを使用する必要がある場合

高度なトピックとプラットフォームの考慮事項

Webコンポーネントまたはネイティブプラグイン

プラットフォームモードとアクセシビリティの詳細

トラブルシューティングの落とし穴とライブ UI 修正の配信

デモが動作する最初のクラスのバグ

実用的な安全領域修正

UIの欠陥に対するライブ更新の重要性

2026年版イオニックアクションシート：完全ガイド

Ionic Action Sheet: 2026年の完全ガイド

目次

イオニックアクションシートの導入

That continuity is useful in real projects. It means the component isn’t a trendy abstraction that changed every release. It’s a stable mobile-first pattern that maps well to iOS and Android option menus, and it still feels natural in Angular, React, and Vue projects.

APIと行動シートコントローラー

Why the API is controller driven

なぜ重要か

拒否は契約の一部です。

Implementation Examples for Angular React and Vue

Angular example

React の例

Vue の例

カスタマイズとスタイリング用のCSS

cssClassからglobal overrideを始めましょう

__CAPGO_KEEP_0__

影のパーツを使用する必要がある場合

高度なトピックとプラットフォームの考慮事項

Webコンポーネントまたはネイティブプラグイン

プラットフォーム モードとアクセシビリティの詳細

トラブルシューティングの落とし穴とライブ UI 修正の配信

デモが動作する最初のクラスのバグ

実用的な安全領域修正

UIの欠陥に対するライブ更新の重要性

2026年版イオニックアクションシート：完全ガイド

プラットフォームモードとアクセシビリティの詳細