イオンコンポーネント

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

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

Ionic Action Sheet の概要
- なぜチームがそれにたどり着くのか
アクションシートコントローラーと API の理解
Angular、React、Vue の実装例
CSSを使用したカスタマイズとスタイリング
高度なトピックとプラットフォームの考慮事項
- Webコンポーネントまたはネイティブプラグイン
- プラットフォームモードとアクセシビリティの詳細
デモが正常に動作する後で出現するバグのトラブルシューティング

イオニックアクションシートの紹介

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

Ionicでは、パターンは長い間一貫してきた。以前のIonicアプリでは、TutorialsPointがサービスを「画面の下部からスライドアップするパネル」と説明しているサービスを使用していた。コントローラーでサービスをインジェクトし、inを呼び出すことで表示される。現代のアプリでは、使用しているが、インタラクションモデルは依然として同じであるため、コンポーネントは、Ionicがフレームワークの世代を超えてモバイルUIパターンを維持している一つの明確な例である。 $ionicActionSheet 実際のプロジェクトでは、その連続性は役に立つ。コンポーネントは、毎回のリリースで変わるトレンドの抽象化ではなく、安定したモバイルファーストパターンである。iOSとAndroidのオプションメニューにマップし、Angular、React、Vueプロジェクトでも自然に感じられる。 show() なぜチームがそれにたどり着くのか ion-action-sheetアクションシートは、ユーザーがすでにコンテキストを理解している場合に、コンパクトなリスト形式の次のステップが必要な場合にうまく機能します。ユーザーが説明、検証、または複数のフォームフィールドが必要な場合に機能しません。 __CAPGO_KEEP_0__.

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_3__

A simple rule helps:

アクションシートを使用する 短い決定メニューを特定のアイテムに関連付けるには使用します。
確認に最小限のオプションが必要な場合にアラートを使用します。 ユーザーがさらにコンテンツ、入力、またはスクロールが必要な場合にモーダルを使用します。
実用的なルール: ボタンラベルが独自に立つことができない場合、追加の段落テキストが必要な場合にアクションシートを強制するのを避けます。

ハイブリッドアプリでは、このパターンはWebからネイティブへのモデルにうまく収まります。UIはWeb層でレンダリングしやすく、タッチデバイスでネイティブに感じることができます。__CAPGO_KEEP_0__に基づいてチームが構築している場合、Webとネイティブの境界を明確に理解したい場合は、__CAPGO_KEEP_1__を跨ぐ__CAPGO_KEEP_0__の機能の分解は参考になります。アクションシートの場所を決定する際に考慮すべきことです。

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 アクションシートの場所を決定する際に考慮すべきことです。

Action Sheet ControllerとAPIを理解する

アクションシートは、inlineコンポーネントとしてだけ考えないようになると、より簡単に理解できるようになります。アクションシートは、ライフサイクルを持つ仮想オーバーレイのように動作します。作成、表示、ユーザーの待機、そしてdismissal後の結果の処理です。

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

なぜAPIはコントローラー駆動型であるか

日常のIonicワークでは、コントローラーに基づくアプローチは、通常、最も綺麗なオプションです。アクションシートは一時的です。ページに大量のテンプレートマークアップを置く必要はありません。オーバーフローアイコンをタップするとのみ表示されるメニューです。

公式のIonicドキュメントでは、アクションシートを「ユーザーによるdismissalが必要なモーダルダイアログ」と定義し、dismissalライフサイクルメソッドである「」を重視しています。これは、Ionicアクションシート__CAPGO_KEEP_0__ドキュメントの設計です。__CAPGO_KEEP_0__の構造を示しています。最初は表示し、dismissal後に反応するようにしてください。タイミングに関する仮定に依存した批判的ロジックを接続しないでください。 実際に重要なオプション アクションシート 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.

アクションシート

ほとんどのチームは、API の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。

オプション	機能	なぜ重要か
`header`	上部ラベルを設定	アクションが曖昧である場合の文脈を良くするのに役立ちます
`subHeader`	アクションが曖昧である場合に軽く説明するのに役立ちます	利用可能なアクションを定義
`buttons`	行動と視覚的強調の場所	カスタムクラスを追加
`cssClass`	グローバルハックの代わりにスコープ内でスタイリングするのに不可欠	__CAPGO_KEEP_0__
`mode`	iOSまたはMDスタイリングを強制する	プラットフォームを横断する制御されたテストに役立つ

ボタン設定は、失敗する場所です。一般的なボタンには次の要素があります。

text __CAPGO_KEEP_0__
icon __CAPGO_KEEP_1__
handler __CAPGO_KEEP_2__
role __CAPGO_KEEP_3__

role __CAPGO_KEEP_4__ destructive __CAPGO_KEEP_5__ cancel __CAPGO_KEEP_6__

__CAPGO_KEEP_7__

__CAPGO_KEEP_8__

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

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

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

CapgoのAPIを覚えておきたいのは、次のことだけです。 Ionic アクションシートは、表示される時点で完了していません。閉じる時点で完了します。

Angular、React、Vueの実装例

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

三つのモバイルアプリのUI画面デザインが表示されています。Angular、React、Vueのラベルが付けられています。食事の宅配サービスを表す画面です。

ネットワークが切断されている場合のメディアアップロードのステータスを管理する場合、このガイドは「Vue、Angular、Reactでオフライン画面を作成する方法」を含む例とよく組み合わされます。写真のアクションは、ネットワーク依存のフローに直接つながることがよくあります。 Angular例 Ionic Angularでは、最も一般的なアプローチはコンポーネントまたはページに注入することです。

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

React例 ActionSheetController Ionic Reactでは、コンパクトで機能的な__CAPGO_KEEP_0__を提供します。これは、イベントハンドラーと自然に組み合わさります。

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);
  }
}

Reactのhook__CAPGO_KEEP_0__は、エргノミックですが、同じルールが適用されます。即時のハンドラーは、選択されたアクションに焦点を当ててください。ディスミスキャラッキーの後始末、分析、またはフォローアップのUIステートに使用してください。

Vue例

__CAPGO_KEEP_0__ 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;

API

__CAPGO_KEEP_0__

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でカスタマイズとスタイリング

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

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

2つの画像。左側は黒の背景に抽象的な3D形状、右側は緑の背景に石の背景に果物。

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

標準的なIonicアプリを構築している場合、 ion-action-sheet 通常はデフォルトです。スタイル化が容易で、コンポーネントのオーバーレイシステムと一貫して動作し、すべてのユーザーにとって理解しやすいようにすることができます。

アプリがCapacitorベースで、ホストOSがシートをレンダリングすることを望む場合は、ネイティブルートが @capacitor/action-sheet です。Ionicはそのプラグインをドキュメントしています。 showActions(options) -> Promise<ShowActionsResult>インストールされている npm install @capacitor/action-sheet と同期されている npx cap sync、また Progressive Web App (PWA) Elements は、Web と PWA のコンテキストでは必須です。 の Capacitor アクションシートプラグインドキュメント.

実用的なトレードオフの表を提供します。

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

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

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

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

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

明確なボタンテキストを使用してください コンテキストからも意味をなすもの
リスクのあるアクション destructive は、インターフェイスが意図を伝えるように予約してください。 保留
__CAPGO_KEEP_0__ cancel 明示 ユーザーが明確な出口を確保できるようにする
装飾的な曖昧さを避ける 複数のアクションが似ているが、結果が非常に異なる場合

スクリーンリーダーや認知負荷制約のあるユーザーが、不明瞭なラベルのオーバーレイを単純なオーバーレイと認識しない

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

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

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

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

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

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

実用的なセーフエリアの修正

アプリがホームインジケーターエリアにシートを表示する場合、スコープ内でオーバーライドするのではなく、広範なグローバルパッチを使用するのではなく始めましょう。

.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 __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, Capgo は、リリースワークフローの一部として評価する価値があります。リリース後、エクスプレッションシートレイアウトのバグ、スタイリングのバグ、コピーのミスなど、ウェブ層の修正をプッシュする方法を提供します。ロールアウトチャンネルと更新の動作を制御することができます。

Ionic Action Sheet: A Complete Guide for 2026

If you are using Ionic Action Sheet: A Complete Guide for 2026 を計画とエンタープライズオペレーションのマイグレーションに使用する場合、__CAPGO_KEEP_0__ Enterprise をCapgo Enterpriseの製品ワークフローに接続する for the product workflow in Capgo Enterprise, をIonic Enterprise Plugin Alternativesの製品ワークフローに接続する __CAPGO_KEEP_0__ Alternatives Capgo Capgo の製品ワークフローについて Capgo コンサルティング Capgo コンサルティングの製品ワークフローについて、 Capgo プレミアムサポート Capgo プレミアムサポートの製品ワークフローについて。

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

目次

イオニックアクションシートの紹介

__CAPGO_KEEP_2__

Action Sheet ControllerとAPIを理解する

なぜAPIはコントローラー駆動型であるか

アクションシート

__CAPGO_KEEP_8__

Angular、React、Vueの実装例

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

Vue例

__CAPGO_KEEP_0__

CSSでカスタマイズとスタイリング

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

広範なテーマング用にカスタムプロパティを使用する

精度が必要な場合に影の部分を使用してください

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

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

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

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

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

実用的なセーフエリアの修正

ライブアップデートの重要性について

Ionic Action Sheet: A Complete Guide for 2026

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

目次

イオニック アクション シートの紹介

__CAPGO_KEEP_2__

Action Sheet ControllerとAPIを理解する

なぜAPIはコントローラー駆動型であるか

アクション シート

__CAPGO_KEEP_8__

Angular、React、Vueの実装例

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

Vue例

__CAPGO_KEEP_0__

CSSでカスタマイズとスタイリング

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

広範なテーマング用にカスタムプロパティを使用する

精度が必要な場合に影の部分を使用してください

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

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

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

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

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

実用的なセーフエリアの修正

ライブアップデートの重要性について

Ionic Action Sheet: A Complete Guide for 2026

イオニックアクションシートの紹介

アクションシート