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

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

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

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

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

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

In Ionicでは、パターンは長い間一貫してきた。 $ionicActionSheet Earlier Ionicアプリはサービスを使用した show() TutorialsPointはサービスを説明している ion-action-sheetpaneが画面の下からスライドアップし、サービスをインジェクトし、コントローラーで呼び出すことで表示されるモダンアプリは.

が使用される

しかし、インタラクションモデルは依然として同じであることがわかり、

これは、Ionicがフレームワークの世代を超えてモバイルUIパターンを保存する一つの明確な例である

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

TutorialsPoint この連続性は実際のプロジェクトで役に立つ
コンポーネントは、毎回のリリースで変わるトレンドの抽象化ではなく、安定したモバイルファーストパターンであることがわかる。iOSとAndroidのオプションメニューにマップし、Angular、React、Vueプロジェクトでも自然に感じられる。確認が必要な場合、最小限のオプションで。
モーダルを使用します。 ユーザーがさらにコンテンツ、入力、またはスクロールが必要な場合。

実用的なルール: ボタンラベルが単独で立ち続くことができない場合は、追加の段落テキストが必要になるため、強制的にアクションシートにインタラクションを入れないでください。

ハイブリッドアプリケーションでは、このパターンはウェブからネイティブへのモデルにぴったり合います。UIはウェブ層でレンダリングしやすく、タッチデバイスではネイティブに感じられるようになっています。Capacitorで開発しているチームが、ウェブとネイティブの境界をより明確に理解したい場合は、__CAPGO_KEEP_1__がウェブとネイティブを繋ぐ方法の解説を参考にしてください。 how Capacitor bridges web and native code アクションシートコントローラーと__CAPGO_KEEP_0__

Understanding the Action Sheet Controller and API

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

APIはコントローラーによって動作する理由

APIはCapacitorのことです。__CAPGO_KEEP_1__はWebです。

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

公式のIonicドキュメントでは、アクションシートを ユーザーによる閉じる必要があるモーダルダイアログ と定義しています。閉じるライフサイクルメソッド onDidDismiss の重要性を強調しています。これは、 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.

__CAPGO_KEEP_0__

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のためのscopedスタイリングの重要な機能です。グローバルなハックではなく。
`mode`	iOSまたはMDスタイリングを強制します。	プラットフォーム間で制御されたテストに役立つ

ボタン設定は、そこでよく間違いが発生する場所です。一般的なボタンには以下のようなものがあります。

text visibleラベル用。
icon 視覚的なヒントが必要な場合。
handler 即時コールバックロジックのために。
role セマンティックな動作とプラットフォームのスタイリングのために。

role 装飾ではありません。使用する。 destructive 削除などの危険なアクションの場合。使用する。 cancel 選択肢のリストを圧力下で読むときに、選択肢の表示とユーザーの選択肢の読み方をどのように影響させるか、選択肢のセットの端に置く。

危険なアクションは、視覚的な重みが同じの中立的なアクションと混ぜておくのは避けるべきです。

解除は契約の一部です。

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

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

シートを作成します。
await present().
await onDidDismiss().
返されたロールまたはデータを読みます。
次のアクションをトリガーする。

あのパターンは面白くないが、それが成功する理由だ。

Angularスタイルの例を簡単に説明する。

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: イオニックアクションシートは、表示された時点で終了していない。終了するのは、閉じた時点だ。

Angular、React、Vueの実装例

フレームワークは異なるが、メンタルモデルは同じだ。すべてのバージョンは同じインタラクションを作成する:ユーザーはアバターをタップし、プロフィール写真のオプションを表示し、1つのアクションを選択し、アプリはオーバーレイが閉じた後、反応する。

Angular、React、VueのモバイルアプリUI画面デザインの3つ。食品配達インターフェイスを表示している。

ネットワーク依存のフローに進む場合、メディアアップロードのオフライン状態も扱っている場合、このガイド Vue、Angular、Reactでオフライン画面を作成する方法写真アクションは、ネットワーク依存のフローに直接進むことが多いので、以下の例と組み合わせることが良い。

Angularの例

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 コンパクトな関数 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 の例

In 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

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

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に委譲されるか、プラットフォーム固有の動作の強さ、そしてシートがすべてのユーザーにとって理解できるようにする方法についても決定する必要があります。

2つの画像のスプリット画像。背景が黒の抽象3D形状と緑の背景の石の図形。

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

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

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

実際の取引のトレードオフ表を提供します。

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

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

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

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

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

明確なボタンテキストを使用する コンテキストからも意味をなす
リスクのあるアクションは destructive 予約 明確なラベルを使用する
明確な cancel 明確な 明確な
装飾的な曖昧さを避ける 類似した音響が異なる結果をもたらすアクションが複数ある場合

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

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

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

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

デモが動作するときに現れるバグ

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

2 番目のクラスはレイアウトです。 Ionic の問題報告では、iOS デバイスの特定の条件下でアクションシートが下部セーフエリアをオーバーレイすることが報告されています。特に --ion-safe-area-bottom が非ゼロの場合、問題報告では、イオニクスのドキュメントのデモでこの問題が再現できることも報告されています。 the GitHub issue about bottom safe area overlap問題報告は「アクションシートの下部セーフエリアのオーバーレイ」についての問題報告です。

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の欠陥のためにライブアップデートが重要なのはなぜですか

リリースオペレーションの実際的な現実が明らかになります。安全エリアの不具合、破損したパディングルール、または破壊的なボタンの色がJavaScriptまたはCSSに生じた場合、待ち時間が生じるまでに、ユーザーの不満を数日間続けることになる小さな視覚的な欠陥が生じます。

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

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

チームが定期的にIonicまたはCapacitorアプリを配信している場合 Capgo リリースワークフローにおける評価価値があります。問題のアクションシートレイアウトのバグ、スタイリングのリグレッション、コピーミスを修正するためのウェブ層の修正をリリース後にプッシュすることができます。ロールアウトチャンネルとアップデートの動作を制御することができます。

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

イオニックアクションシート: 2026年版の完全ガイドを使用している場合 イオニックアクションシート: 2026年版の完全ガイド ビジネス上の移行とエンタープライズオペレーションを計画するには、__CAPGO_KEEP_0__ エンタープライズと接続する必要があります。 Capgo エンタープライズの製品ワークフロー for the product workflow in Capgo Enterprise, __CAPGO_KEEP_0__ 代替の製品ワークフロー __CAPGO_KEEP_0__ 代替の製品ワークフロー Capgo コンサルティング Capgo Enterprise Capgo Enterprise is a protected token and should not be translated. for the product workflow in Capgo Consulting, and Capgo Premium Support for the product workflow in Capgo Premium Support.

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

目次

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

しかし、インタラクションモデルは依然として同じであることがわかり、

Understanding the Action Sheet Controller and API

APIはCapacitorのことです。__CAPGO_KEEP_1__はWebです。

__CAPGO_KEEP_0__

解除は契約の一部です。

Angular、React、Vueの実装例

Angularの例

React の例

Vue の例

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

cssClassからグローバルオーバーライドを始める

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

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

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

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

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

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

デモが動作するときに現れるバグ

Apractical safe area fix

UIの欠陥のためにライブアップデートが重要なのはなぜですか

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

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

目次

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

しかし、インタラクションモデルは依然として同じであることがわかり、

Understanding the Action Sheet Controller and API

APIはCapacitorのことです。__CAPGO_KEEP_1__はWebです。

__CAPGO_KEEP_0__

解除は契約の一部です。

Angular、React、Vueの実装例

Angularの例

React の例

Vue の例

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

cssClassからグローバルオーバーライドを始める

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

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

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

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

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

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

デモが動作するときに現れるバグ

Apractical safe area fix

UIの欠陥のためにライブアップデートが重要なのはなぜですか

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

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