Ionic Action Sheet: A Complete Guide for 2026

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

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

イオニックアクションシートの導入
- なぜチームがそれにたどり着くのか
APIとアクションシートコントローラーの理解
Angular、React、Vueの実装例
__CAPGO_KEEP_0__とCSSによるカスタマイズとスタイリング
高度なトピックとプラットフォームの考慮事項
- Webコンポーネントまたはネイティブプラグイン
- プラットフォームモードとアクセシビリティの詳細
トラブルシューティングの落とし穴とライブUI修正

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

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

Ionicでは、パターンは長い間一貫してきた。 $ionicActionSheet 過去のIonicアプリは show() サービスを使用しており、TutorialsPointでは画面の下部からスライドアップするパネルとして説明されており、サービスをインジェクトし ion-action-sheetコントローラー内で呼び出して表示することで表示されていた。現代のアプリは.

を使用しているが、インタラクションモデルは依然として同じで認識できるため、コンポーネントはIonicがフレームワークの世代をまたいでモバイルUIパターンを保存するうちの明確な例の1つである。

Ionic 1のアクションシートドキュメントサマリーからTutorialsPoint

実際のプロジェクトでは、その連続性は役に立つ。コンポーネントは、毎回のリリースで変更されるトレンドの抽象化ではなく、安定したモバイルファーストパターンであり、iOSとAndroidのオプションメニューに適合し、Angular、React、Vueプロジェクトでも自然に感じられる。

なぜチームがそれにたどり着くのか

アクションシートは、ユーザーがすでにコンテキストを理解している場合にのみ効果的である。ユーザーが説明、検証、または複数のフォームフィールドが必要な場合にのみ効果が低下する。簡単なルールが役立つ
アクションシートは、特定のアイテムに結びついた短い決定メニューの場合に使用する。アラートは、ユーザーが説明、検証、または複数のフォームフィールドが必要な場合に使用する。 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.

ハイブリッドアプリでは、このパターンはWeb-to-Nativeモデルにうってつけです。UIはWeb層でレンダリングしやすく、タッチデバイスでネイティブに感じることができます。Capacitorで開発しているチームが、Webとネイティブの境界をより明確に理解したい場合は、CapacitorがWebとネイティブをどのように結びついているかを理解することは価値があります。 Capacitorとcodeの境界を理解するために、CapacitorがWebとネイティブをどのように結びついているかを理解することは価値があります。アクションシートコントローラーと__CAPGO_KEEP_0__の理解

Understanding the Action Sheet Controller and API

アクションシートコントローラーのアーキテクチャ、設定、__CAPGO_KEEP_0__コンポーネントのフローチャート図

APIはコントローラー駆動型であるため

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

公式のIonicドキュメントでは、アクションシートを モーダルダイアログ と定義し、ユーザーによる解決のライフサイクルメソッドである onDidDismiss を重視しています。 IonicアクションシートAPIドキュメント. That design tells you how to structure your code. Present first. React after dismissal. Don’t wire critical logic to assumptions about timing.

アクションシートの設計は、構造化する方法を教えています。最初に表示し、解決後に反応すること。タイミングに関する仮定に依存した批判的なロジックを接続しないこと。

Most teams only need a small subset of the API, but they need to use that subset correctly.

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

ボタン設定は、そこで最もよく起こるミスです。一般的なボタンには以下のようなものがあります。

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

role __CAPGO_KEEP_0__は装飾的ではない。__CAPGO_KEEP_1__ destructive 危険なアクションの場合、__CAPGO_KEEP_0__ cancel エスケープパス用。__CAPGO_KEEP_1__は選択肢の提示方法と、プレッシャー下でのリストの読み取り方法に影響を与える。

危険なアクションは選択肢のセットの端に置く。中立的なアクションと同じ視覚的重みを共有することはない。

却下は契約の一部です。

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

__CAPGO_KEEP_0__を意図的に使用してください。

シートを作成します。
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

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 の例

Ionic React では、 useIonActionSheet イベントハンドラーと自然にフィットするコンパクトな関数型 API を提供します。

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 の例

Ionic Vue では、 actionSheetController Composition 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からグローバルオーバーライドを始めましょう

最初のスタイリングルールは簡単です。アプリ全体のアクションシートをターゲットにする必要はありません。 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;
}

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

カスタムプロパティを使用して広範なテーマングを行います

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の抽象的な形状と緑の背景に石の図形が並んだ2つの画像のスプリット画面。

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

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

If your app is Capacitor-based and you want the host operating system to render the sheet, the native route is @capacitor/action-sheetIonicはプラグインを showActions(options) -> Promise<ShowActionsResult>インストールされている npm install @capacitor/action-sheet syncされている npx cap syncを記載している PWA ElementsはWebとPWAコンテキストで必要です in the Capacitor アクションシートプラグインドキュメント.

その結果、実用的なトレードオフの表が得られます。

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

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

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

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

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

明確なボタンテキストを使用してください コンテキストからも意味をなすものでなければなりません。
リスクのあるアクション destructive は、インターフェイスが意図を伝えるようにしてください。 明確な
で、ユーザーが明確な出口のパスを持つようにしてください。 cancel 装飾的な曖昧さ を避けてください。複数のアクションが似たような音を出していても、非常に異なる結果をもたらすものです。
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__

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

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

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

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

デモが動作するバグ

最初のクラスのバグはタイミングである。Logic は code が閉じるのを待っていないため、早すぎる。オーバーレイがアニメーション中のときにルートが変更され、またはコンポーネントのレンダリングと競合する別のコンポーネントの state の更新が見られる。

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

Apractical safe area fix

アプリがホームインジケーターエリアに近い位置でシートを表示する場合、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の欠陥を修正するためのコンクリートの場所を提供することができます。

UI欠陥のライブアップデートの重要性

リリースオペレーションの実際的な現実が明らかになります。安全エリアの不具合、破損したパディングルール、破壊的なボタンの色がJavaScriptまたはCSSに存在することがよくあります。もしもそのバグがプロダクションに送信されると、待つことになるフルストアリリースの待ち時間が、ユーザーの視覚的な欠陥に数日間のストレスをもたらすことになります。

1つの実用的オプションは、Capacitorアプリ用のライブアップデートサービスです。たとえば Capgo 更新されたWebバンドルを配信することで、チームはJavaScript、CSS、コピー、設定、資産の修正を待つことなく、App Storeのレビューを待つことなく、JavaScript、CSS、コピー、設定、資産の修正を実行できます。これは、特にアクションシートのスタイリングまたはオーバーレイのバグがQAを通過した場合に直接関連しています。

UIオーバーレイは、安全ネットが効果を発揮するような特性です。小さなスタイリングの変更で簡単に破損し、通常はネイティブのcodeを再構築することなく修正できるためです。

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

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

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

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

目次

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

Ionic 1のアクションシートドキュメントサマリーからTutorialsPoint

Understanding the Action Sheet Controller and API

APIはコントローラー駆動型であるため

アクションシートの設計は、構造化する方法を教えています。最初に表示し、解決後に反応すること。タイミングに関する仮定に依存した批判的なロジックを接続しないこと。

却下は契約の一部です。

Implementation Examples for Angular React and Vue

Angular example

React の例

Vue の例

カスタマイズとスタイリングにCSSを使用

cssClassからグローバルオーバーライドを始めましょう

カスタムプロパティを使用して広範なテーマングを行います

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

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

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

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

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

デモが動作するバグ

Apractical safe area fix

UI欠陥のライブアップデートの重要性

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

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

目次

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

Ionic 1のアクションシートドキュメントサマリーからTutorialsPoint

Understanding the Action Sheet Controller and API

APIはコントローラー駆動型であるため

アクションシートの設計は、構造化する方法を教えています。最初に表示し、解決後に反応すること。タイミングに関する仮定に依存した批判的なロジックを接続しないこと。

却下は契約の一部です。

Implementation Examples for Angular React and Vue

Angular example

React の例

Vue の例

カスタマイズとスタイリングにCSSを使用

cssClassからグローバルオーバーライドを始めましょう

カスタムプロパティを使用して広範なテーマングを行います

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

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

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

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

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

デモが動作するバグ

Apractical safe area fix

UI欠陥のライブアップデートの重要性

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

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