Version: v7 (beta)

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

アクセシビリティ

アクションシートには role として dialog が与えられます。ARIA仕様に合わせるため、aria-label属性またはaria-labelledby属性のいずれかを設定する必要があります。

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

Interfaces

ActionSheetButton

interface ActionSheetButton<T = any> {
  text?: string;
  role?: 'cancel' | 'destructive' | 'selected' | string;
  icon?: string;
  cssClass?: string | string[];
  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`

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`

イベント

Name	Description
`ionActionSheetDidDismiss`	アラートが解除された後に発行されます。
`ionActionSheetDidPresent`	アラートが提示された後に発行されます。
`ionActionSheetWillDismiss`	アラートが解除される前に発行されます。
`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カスタムプロパティ​

アクセシビリティ​

Interfaces​

ActionSheetButton​

ActionSheetOptions​

プロパティ​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

keyboardClose​

leaveAnimation​

mode​

subHeader​

translucent​

イベント​

メソッド​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

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

`isOpen` を使う

Controller アクションシート

Buttons

Collecting Role Information on Dismiss

テーマ

スタイリング

CSSカスタムプロパティ

アクセシビリティ

Interfaces

ActionSheetButton

ActionSheetOptions

プロパティ

animated

backdropDismiss

buttons

cssClass

enterAnimation

header

htmlAttributes

keyboardClose

leaveAnimation

mode

subHeader

translucent

イベント

メソッド

dismiss

onDidDismiss

onWillDismiss

present

CSS Shadow Parts

CSSカスタムプロパティ

Slots