Version: v7

ion-action-sheet

Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。ios modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。

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

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

`isOpen` を使う

ion-action-sheet の isOpen プロパティは、開発者がアプリケーションの状態からアクションシートの表示状態を制御することを可能にします。つまり、isOpenがtrueに設定されるとアクションシートが表示され、isOpenがfalseに設定されるとアクションシートは解除されます。

isOpen は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に false に設定されることはありません。開発者は ionActionSheetDidDismiss または didDismiss イベントをリッスンして isOpen を false に設定する必要があります。この理由は、ion-action-sheet の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。

Controller アクションシート

アクションシートの表示・非表示をより細かく制御したい場合は、actionSheetControllerを使用することができます。

Buttons

Buttonの role プロパティは、 destructive か cancel のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。cancel role を持つButtonは、配列 buttons のどこに配置してもアクションシートの最下部に表示されます。 Note: destructive roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。

Buttonは ActionSheetButton の data プロパティを介してデータを渡すこともできます。これは onDidDismiss メソッドの戻り値にある data フィールドにデータを入力します。

Collecting Role Information on Dismiss

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

テーマ

アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、higher specificity セレクタが必要です。

スタイリング

私たちは、 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カスタムプロパティは、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。

アクセシビリティ

Screen Readers

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

Role

アクションシートには role として dialog が設定されます。ARIA仕様に合わせるためには、aria-label属性かaria-labelledby属性のどちらかを設定しなければなりません。

Action Sheet の概要

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

Action Sheet Buttons の概要

テキストを含むボタンはスクリーンリーダーによって読み取られる。ボタンがアイコンのみを含んでいる場合や、既存のテキスト以外の説明が必要な場合は、ボタンの 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',
      },
    },
  ],
});

Interfaces

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

Description	`true`の場合、アクションシートはアニメーションを行います。
Attribute	`animated`
Type	`boolean`
Default	`true`

backdropDismiss

Description	`true`の場合、バックドロップがクリックされるとアクションシートが解除されます。
Attribute	`backdrop-dismiss`
Type	`boolean`
Default	`true`

buttons

Description	アクションシートのボタンの配列です。
Attribute	`undefined`
Type	`(string ｜ ActionSheetButton<any>)[]`
Default	`[]`

cssClass

Description	カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
Attribute	`css-class`
Type	`string ｜ string[] ｜ undefined`
Default	`undefined`

enterAnimation

Description	アクションシートの提示時に使用するアニメーションです。
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

Description	アクションシートのタイトルです。
Attribute	`header`
Type	`string ｜ undefined`
Default	`undefined`

htmlAttributes

Description	アクションシートに渡す追加属性。
Attribute	`undefined`
Type	`undefined ｜ { [key: string]: any; }`
Default	`undefined`

isOpen

Description	`true`の場合、アクションシートは開かれます。`false`の場合、アクションシートは閉じます。プレゼンテーションの細かな制御が必要な場合はこれを使用し、そうでない場合は actionSheetController または `trigger` プロパティを使用します。注意: アクションシートが終了しても、`isOpen`は自動的に`false`に戻されません。あなたのコードでそれを行う必要があります。
Attribute	`is-open`
Type	`boolean`
Default	`false`

keyboardClose

Description	`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attribute	`keyboard-close`
Type	`boolean`
Default	`true`

leaveAnimation

Description	アクションシートが解除されたときに使用するアニメーションです。
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

subHeader

Description	アクションシートのサブタイトルです。
Attribute	`sub-header`
Type	`string ｜ undefined`
Default	`undefined`

translucent

Description	`true`の場合、アクションシートは半透明になります。modeが `"ios"` で、デバイスが `backdrop-filter` をサポートしている場合にのみ適用されます。
Attribute	`translucent`
Type	`boolean`
Default	`false`

trigger

Description	クリックするとアクションシートが開くトリガー要素に対応するID。
Attribute	`trigger`
Type	`string ｜ undefined`
Default	`undefined`

イベント

Name	Description
`didDismiss`	アクションシートが解散した後に発行されます。ionActionSheetDidDismissの略記。
`didPresent`	アクションシートが提示された後に発行されます。ionActionSheetWillDismissの略語。
`ionActionSheetDidDismiss`	アクションシートが解散した後に発行されます。
`ionActionSheetDidPresent`	アクションシートが提示された後に発行されます。
`ionActionSheetWillDismiss`	アクションシートが解散する前に発行されます。
`ionActionSheetWillPresent`	アクションシートが提示される前に発行されます。
`willDismiss`	アクションシートが解散する前に発行されます。ionActionSheetWillDismissの略記。
`willPresent`	アクションシートが提示される前に発行されます。ionActionSheetWillPresentの略記。

メソッド

dismiss

Description	アクションシートのオーバーレイが提示された後、それを解除します。
Signature	`dismiss(data?: any, role?: string) => Promise<boolean>`

onDidDismiss

Description	アクションシートが解散したときに解決するPromiseを返します。
Signature	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

Description	アクションシートが解散するタイミングを解決するPromiseを返します。
Signature	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

Description	アクションシートのオーバーレイを作成後に提示します。
Signature	`present() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--backdrop-opacity`	背景の不透明度
`--background`	アクションシートグループの背景
`--button-background`	アクションシートボタンの背景
`--button-background-activated`	アクションシートボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。
`--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-focused`	にタブで移動したときのアクションシートのボタンの色。
`--button-color-hover`	ホバー時のアクションシートボタンの色
`--button-color-selected`	選択されたアクションシートのボタンの色
`--color`	アクションシートテキストの色
`--height`	アクションシートの高さ
`--max-height`	アクションシートの最大の高さ
`--max-width`	アクションシートの最大幅
`--min-height`	アクションシートの最小高さ
`--min-width`	アクションシートの最小幅
`--width`	アクションシートの横幅

Slots

No slots available for this component.

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

isOpen を使う​

Controller アクションシート​

Buttons​

Collecting Role Information on Dismiss​

テーマ​

スタイリング​

CSSカスタムプロパティ​

アクセシビリティ​

Screen Readers​

Role​

Action Sheet の概要​

Action Sheet Buttons の概要​

Interfaces​

ActionSheetButton​

ActionSheetOptions​

プロパティ​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

mode​

subHeader​

translucent​

trigger​

イベント​

メソッド​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

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

`isOpen` を使う

Controller アクションシート

Buttons

Collecting Role Information on Dismiss

テーマ

スタイリング

CSSカスタムプロパティ

アクセシビリティ

Screen Readers

Role

Action Sheet の概要

Action Sheet Buttons の概要

Interfaces

ActionSheetButton

ActionSheetOptions

プロパティ

animated

backdropDismiss

buttons

cssClass

enterAnimation

header

htmlAttributes

isOpen

keyboardClose

leaveAnimation

mode

subHeader

translucent

trigger

イベント

メソッド

dismiss

onDidDismiss

onWillDismiss

present

CSS Shadow Parts

CSSカスタムプロパティ

Slots