バージョン: v8

ion-action-sheet

アクションシートとは、一連のオプションを表示するダイアログです。アプリのコンテンツの上に表示され、ユーザーがアプリとのインタラクションを再開する前に手動で閉じる必要があります。破壊的なオプションは、`ios` モードでは明確に示されます。アクションシートを閉じるには、背景をタップする、デスクトップで Escape キーを押すなど、複数の方法があります。

インラインアクションシート (推奨)

`ion-action-sheet` は、テンプレートにコンポーネントを直接記述することで使用できます。これにより、アクションシートを表示するために接続する必要があるハンドラの数が減ります。

`isOpen` の使用

`ion-action-sheet` の `isOpen` プロパティを使用すると、開発者はアプリケーションの状態からアクションシートの表示状態を制御できます。つまり、`isOpen` が `true` に設定されているとアクションシートが表示され、`isOpen` が `false` に設定されているとアクションシートが閉じられます。

`isOpen` は一方向データバインディングを使用します。つまり、アクションシートが閉じられたときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンし、`isOpen` を `false` に設定する必要があります。これの理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合されないようにするためです。一方向データバインディングでは、アクションシートはリアクティブ変数が提供するブール値のみを考慮する必要があります。双方向データバインディングでは、アクションシートはブール値とリアクティブ変数自体の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。

コントローラーアクションシート

`actionSheetController` は、アクションシートの表示と閉じのタイミングをより詳細に制御する必要がある場合に使用できます。

ボタン

ボタンの `role` プロパティは、`destructive` または `cancel` のいずれかになります。 role プロパティのないボタンは、プラットフォームのデフォルトの外観になります。 `cancel` ロールを持つボタンは、配列内のどこに配置されていても、常に一番下のボタンとしてロードされます。他のすべてのボタンは、`buttons` 配列に追加された順序で表示されます。注: `destructive` ボタンは常に配列の最初のボタン、つまり一番上のボタンにすることをお勧めします。さらに、アクションシートが背景をタップすることによって閉じられた場合、キャンセルロールを持つボタンのハンドラが起動されます。

ボタンは、`ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これにより、`onDidDismiss` メソッドの戻り値の `data` フィールドにデータが設定されます。

閉じる際のロール情報の収集

`didDismiss` イベントが発生すると、イベント詳細の `data` フィールドと `role` フィールドを使用して、アクションシートがどのように閉じられたかについての情報を収集できます。

コンソール

上記の例からログに記録されると、ここにコンソールメッセージが表示されます。

テーマ設定

アクションシートはスコープ付きのカプセル化を使用します。つまり、実行時に各スタイルに追加のクラスを追加することで、CSS のスコープを自動的に設定します。 CSS でスコープ付きセレクターをオーバーライドするには、より高い特異性を持つセレクターが必要です。

スタイリング

`create` メソッドでカスタムクラスを `cssClass` に渡して、それを使用してホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスも受け入れることができます。

/* DOES NOT WORK - not specific enough */
.action-sheet-group {
  background: #e5e5e5;
}

/* Works - pass "my-custom-class" in cssClass to increase specificity */
.my-custom-class .action-sheet-group {
  background: #e5e5e5;
}

CSSカスタムプロパティ

定義済みのCSSカスタムプロパティは、個々の要素をターゲットにすることなく、アクションシートのスタイルを設定するために使用できます。

アクセシビリティ

スクリーンリーダー

アクションシートは、スクリーンリーダーでアクセスできるようにするために aria プロパティを設定しますが、これらのプロパティが十分に説明的でない場合、またはアクションシートがアプリで使用されている方法と一致しない場合は、オーバーライドできます。

ロール

アクションシートには、`dialog` の `role` が割り当てられます。 ARIA仕様に準拠するには、`aria-label` 属性または `aria-labelledby` 属性を設定する必要があります。

アクションシートの説明

Ionic は `aria-labelledby` をヘッダー要素を指すように自動的に設定するため、すべてのアクションシートで `header` プロパティを定義することを強くお勧めします。ただし、`header` を含めない場合は、代わりに `htmlAttributes` プロパティを使用して説明的な `aria-label` を提供するか、カスタムの `aria-labelledby` 値を設定します。

Angular
Javascript
React
Vue

const actionSheet = await this.actionSheetController.create({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

const actionSheet = await this.actionSheetController.create({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

useIonActionSheet({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

const actionSheet = await actionSheetController.create({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

アクションシートボタンの説明

テキストを含むボタンは、スクリーンリーダーによって読み取られます。ボタンにアイコンのみが含まれている場合、または既存のテキスト以外の説明が必要な場合は、ボタンの `htmlAttributes` プロパティに `aria-label` を渡すことによって、ボタンにラベルを割り当てる必要があります。

Angular
Javascript
React
Vue

const actionSheet = await this.actionSheetController.create({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

const actionSheet = await this.actionSheetController.create({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

useIonActionSheet({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

const actionSheet = await actionSheetController.create({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

インターフェース

ActionSheetButton

interface ActionSheetButton<T = any> {
  text?: string;
  role?: 'cancel' | 'destructive' | 'selected' | string;
  icon?: string;
  cssClass?: string | string[];
  id?: string;
  htmlAttributes?: { [key: string]: any };
  handler?: () => boolean | void | Promise<boolean | void>;
  data?: T;
}

ActionSheetOptions

interface ActionSheetOptions {
  header?: string;
  subHeader?: string;
  cssClass?: string | string[];
  buttons: (ActionSheetButton | string)[];
  backdropDismiss?: boolean;
  translucent?: boolean;
  animated?: boolean;
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;
  htmlAttributes?: { [key: string]: any };

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

プロパティ

animated

説明	`true` の場合、アクションシートはアニメーション化されます。
属性	`animated`
タイプ	`ブーリアン`
デフォルト	`true`

backdropDismiss

説明	`true`の場合、バックドロップをクリックするとアクションシートが閉じます。
属性	`backdrop-dismiss`
タイプ	`ブーリアン`
デフォルト	`true`

buttons

説明	アクションシートのボタンの配列。
属性	`未定義`
タイプ	`(string ｜ ActionSheetButton<any>)[]`
デフォルト	`[]`

cssClass

説明	カスタムCSSに適用する追加クラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
属性	`css-class`
タイプ	`string ｜ string[] ｜未定義`
デフォルト	`未定義`

enterAnimation

説明	アクションシートが表示されるときに使用するアニメーション。
属性	`未定義`
タイプ	`((baseEl: any, opts?: any) => Animation) ｜未定義`
デフォルト	`未定義`

説明	アクションシートのタイトル。
属性	`header`
タイプ	`string ｜未定義`
デフォルト	`未定義`

htmlAttributes

説明	アクションシートに渡す追加属性。
属性	`未定義`
タイプ	`未定義｜ { [key: string]: any; }`
デフォルト	`未定義`

isOpen

説明	`true`の場合、アクションシートが開きます。 `false`の場合、アクションシートは閉じます。表示をより細かく制御する必要がある場合はこれを使用します。そうでない場合は、actionSheetControllerまたは`trigger`プロパティを使用します。注：アクションシートが閉じると、`isOpen`は自動的に`false`に設定されません。コードでこれを行う必要があります。
属性	`is-open`
タイプ	`ブーリアン`
デフォルト	`false`

keyboardClose

説明	`true`の場合、オーバーレイが表示されるとキーボードが自動的に閉じます。
属性	`keyboard-close`
タイプ	`ブーリアン`
デフォルト	`true`

leaveAnimation

説明	アクションシートが閉じるときに使用するアニメーション。
属性	`未定義`
タイプ	`((baseEl: any, opts?: any) => Animation) ｜未定義`
デフォルト	`未定義`

mode

説明	modeは、使用するプラットフォームスタイルを決定します。
属性	`mode`
タイプ	`"ios" ｜ "md"`
デフォルト	`未定義`

subHeader

説明	アクションシートのサブタイトル。
属性	`sub-header`
タイプ	`string ｜未定義`
デフォルト	`未定義`

translucent

説明	`true`の場合、アクションシートは半透明になります。モードが`"ios"`で、デバイスが`backdrop-filter`をサポートしている場合にのみ適用されます。
属性	`translucent`
タイプ	`ブーリアン`
デフォルト	`false`

trigger

説明	クリックするとアクションシートを開くトリガー要素に対応するID。
属性	`trigger`
タイプ	`string ｜未定義`
デフォルト	`未定義`

イベント

名前	説明	バブル
`didDismiss`	アクションシートが閉じた後に発行されます。 ionActionSheetDidDismissの省略形。	`true`
`didPresent`	アクションシートが表示された後に発行されます。 ionActionSheetWillDismissの省略形。	`true`
`ionActionSheetDidDismiss`	アクションシートが閉じた後に発行されます。	`true`
`ionActionSheetDidPresent`	アクションシートが表示された後に発行されます。	`true`
`ionActionSheetWillDismiss`	アクションシートが閉じる前に発行されます。	`true`
`ionActionSheetWillPresent`	アクションシートが表示される前に発行されます。	`true`
`willDismiss`	アクションシートが閉じる前に発行されます。 ionActionSheetWillDismissの省略形。	`true`
`willPresent`	アクションシートが表示される前に発行されます。 ionActionSheetWillPresentの省略形。	`true`

メソッド

dismiss

説明	表示された後、アクションシートオーバーレイを閉じます。
シグネチャ	`dismiss(data?: any, role?: string) => Promise<boolean>`

onDidDismiss

説明	アクションシートが閉じたときに解決されるpromiseを返します。
シグネチャ	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

説明	アクションシートが閉じるときに解決されるpromiseを返します。
シグネチャ	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

説明	作成後にアクションシートオーバーレイを表示します。
シグネチャ	`present() => Promise<void>`

CSSシャドウパーツ

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ

名前	説明
`--backdrop-opacity`	バックドロップの不透明度
`--background`	アクションシートグループの背景
`--button-background`	アクションシートボタンの背景
`--button-background-activated`	押されたときのアクションシートボタンの背景。注：これを設定すると、マテリアルデザインのリップルに干渉します。
`--button-background-activated-opacity`	押されたときのアクションシートボタンの背景の不透明度
`--button-background-focused`	タブ移動されたときのアクションシートボタンの背景
`--button-background-focused-opacity`	タブ移動されたときのアクションシートボタンの背景の不透明度
`--button-background-hover`	ホバー時アクションシートボタンの背景
`--button-background-hover-opacity`	ホバー時アクションシートボタンの背景の不透明度
`--button-background-selected`	選択されたアクションシートボタンの背景
`--button-background-selected-opacity`	選択されたアクションシートボタンの背景の不透明度
`--button-color`	アクションシートボタンの色
`--button-color-activated`	押されたときのアクションシートボタンの色
`--button-color-disabled`	無効になっているときのアクションシートボタンの色
`--button-color-focused`	タブ移動されたときのアクションシートボタンの色
`--button-color-hover`	ホバー時アクションシートボタンの色
`--button-color-selected`	選択されたアクションシートボタンの色
`--color`	アクションシートテキストの色
`--height`	アクションシートの高さ
`--max-height`	アクションシートの最大高さ
`--max-width`	アクションシートの最大幅
`--min-height`	アクションシートの最小高さ
`--min-width`	アクションシートの最小幅
`--width`	アクションシートの幅

名前	説明
`--backdrop-opacity`	バックドロップの不透明度
`--background`	アクションシートグループの背景
`--button-background`	アクションシートボタンの背景
`--button-background-activated`	押されたときのアクションシートボタンの背景。注：これを設定すると、マテリアルデザインのリップルに干渉します。
`--button-background-activated-opacity`	押されたときのアクションシートボタンの背景の不透明度
`--button-background-focused`	タブ移動されたときのアクションシートボタンの背景
`--button-background-focused-opacity`	タブ移動されたときのアクションシートボタンの背景の不透明度
`--button-background-hover`	ホバー時アクションシートボタンの背景
`--button-background-hover-opacity`	ホバー時アクションシートボタンの背景の不透明度
`--button-background-selected`	選択されたアクションシートボタンの背景
`--button-background-selected-opacity`	選択されたアクションシートボタンの背景の不透明度
`--button-color`	アクションシートボタンの色
`--button-color-activated`	押されたときのアクションシートボタンの色
`--button-color-disabled`	無効になっているときのアクションシートボタンの色
`--button-color-focused`	タブ移動されたときのアクションシートボタンの色
`--button-color-hover`	ホバー時アクションシートボタンの色
`--button-color-selected`	選択されたアクションシートボタンの色
`--color`	アクションシートテキストの色
`--height`	アクションシートの高さ
`--max-height`	アクションシートの最大高さ
`--max-width`	アクションシートの最大幅
`--min-height`	アクションシートの最小高さ
`--min-width`	アクションシートの最小幅
`--width`	アクションシートの幅

スロット

このコンポーネントで使用できるスロットはありません。

インラインアクションシート (推奨)​

`isOpen` の使用​

コントローラーアクションシート​

ボタン​

閉じる際のロール情報の収集​

テーマ設定​

スタイリング​

CSSカスタムプロパティ​

アクセシビリティ​

スクリーンリーダー​

ロール​

アクションシートの説明​

アクションシートボタンの説明​

インターフェース​

ActionSheetButton​

ActionSheetOptions​

プロパティ​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

mode​

subHeader​

translucent​

trigger​

イベント​

メソッド​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSSシャドウパーツ​

CSSカスタムプロパティ​

スロット​

目次

インラインアクションシート (推奨)

`isOpen` の使用

コントローラーアクションシート

ボタン

閉じる際のロール情報の収集

テーマ設定

スタイリング

CSSカスタムプロパティ

アクセシビリティ

スクリーンリーダー

ロール

アクションシートの説明

アクションシートボタンの説明

インターフェース

ActionSheetButton

ActionSheetOptions

プロパティ

animated

backdropDismiss

buttons

cssClass

enterAnimation

header

htmlAttributes

isOpen

keyboardClose

leaveAnimation

mode

subHeader

translucent

trigger

イベント

メソッド

dismiss

onDidDismiss

onWillDismiss

present

CSSシャドウパーツ

CSSカスタムプロパティ

スロット