Version: v7 (beta)

ion-action-sheet

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

Inline Action Sheets (Recommended)

ion-action-sheet can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet.

Using `isOpen`

The isOpen property on ion-action-sheet allows developers to control the presentation state of the Action Sheet from their application state. This means when isOpen is set to true the Action Sheet will be presented, and when isOpen is set to false the Action Sheet will be dismissed.

isOpen uses a one-way data binding, meaning it will not automatically be set to false when the Action Sheet is dismissed. Developers should listen for the ionActionSheetDidDismiss or didDismiss event and set isOpen to false. The reason for this is it prevents the internals of ion-action-sheet from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.

Controller Action Sheets

The actionSheetController can be used in situations where more control is needed over when the Action Sheet is presented and dismissed.

Buttons

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

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

Collecting Role Information on Dismiss

When the didDismiss event is fired, the data and role fields of the event detail can be used to gather information about how the Action Sheet was dismissed.

Theming

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

Styling

私たちは、 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 Custom Properties

Any of the defined CSS Custom Properties can be used to style the Action Sheet without needing to target individual elements.

Accessibility

Action Sheets are given a role of dialog. In order to align with the ARIA spec, either the aria-label or aria-labelledby attribute must be set.

It is strongly recommended that every Action Sheet have the header property defined, as Ionic will automatically set aria-labelledby to point to the header element. However, if you choose not to include a header, an alternative is to use the htmlAttributes property to provide a descriptive aria-label or set a custom aria-labelledby value.

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

Properties

animated

Description	If `true`, the action sheet will animate.
Attribute	`animated`
Type	`boolean`
Default	`true`

backdropDismiss

Description	If `true`, the action sheet will be dismissed when the backdrop is clicked.
Attribute	`backdrop-dismiss`
Type	`boolean`
Default	`true`

buttons

Description	An array of buttons for the action sheet.
Attribute	`undefined`
Type	`(string ｜ ActionSheetButton<any>)[]`
Default	`[]`

cssClass

Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	`css-class`
Type	`string ｜ string[] ｜ undefined`
Default	`undefined`

enterAnimation

Description	Animation to use when the action sheet is presented.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

Description	Title for the action sheet.
Attribute	`header`
Type	`string ｜ undefined`
Default	`undefined`

htmlAttributes

Description	Additional attributes to pass to the action sheet.
Attribute	`undefined`
Type	`undefined ｜ { [key: string]: any; }`
Default	`undefined`

isOpen

Description	If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
Attribute	`is-open`
Type	`boolean`
Default	`false`

keyboardClose

Description	If `true`, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	`keyboard-close`
Type	`boolean`
Default	`true`

leaveAnimation

Description	Animation to use when the action sheet is dismissed.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

subHeader

Description	Subtitle for the action sheet.
Attribute	`sub-header`
Type	`string ｜ undefined`
Default	`undefined`

translucent

Description	If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports `backdrop-filter`.
Attribute	`translucent`
Type	`boolean`
Default	`false`

trigger

Description	An ID corresponding to the trigger element that causes the action sheet to open when clicked.
Attribute	`trigger`
Type	`string ｜ undefined`
Default	`undefined`

イベント

Name	Description
`didDismiss`	Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.
`didPresent`	Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.
`ionActionSheetDidDismiss`	Emitted after the action sheet has dismissed.
`ionActionSheetDidPresent`	Emitted after the action sheet has presented.
`ionActionSheetWillDismiss`	Emitted before the action sheet has dismissed.
`ionActionSheetWillPresent`	Emitted before the action sheet has presented.
`willDismiss`	Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.
`willPresent`	Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.

メソッド

dismiss

Description	Dismiss the action sheet overlay after it has been presented.
Signature	`dismiss(data?: any, role?: string) => Promise<boolean>`

onDidDismiss

Description	Returns a promise that resolves when the action sheet did dismiss.
Signature	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

Description	Returns a promise that resolves when the action sheet will dismiss.
Signature	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

Description	Present the action sheet overlay after it has been created.
Signature	`present() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--backdrop-opacity`	Opacity of the backdrop
`--background`	Background of the action sheet group
`--button-background`	Background of the action sheet button
`--button-background-activated`	Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
`--button-background-activated-opacity`	Opacity of the action sheet button background when pressed
`--button-background-focused`	Background of the action sheet button when tabbed to
`--button-background-focused-opacity`	Opacity of the action sheet button background when tabbed to
`--button-background-hover`	Background of the action sheet button on hover
`--button-background-hover-opacity`	Opacity of the action sheet button background on hover
`--button-background-selected`	Background of the selected action sheet button
`--button-background-selected-opacity`	Opacity of the selected action sheet button background
`--button-color`	Color of the action sheet button
`--button-color-activated`	Color of the action sheet button when pressed
`--button-color-focused`	Color of the action sheet button when tabbed to
`--button-color-hover`	Color of the action sheet button on hover
`--button-color-selected`	Color of the selected action sheet button
`--color`	Color of the action sheet text
`--height`	height of the action sheet
`--max-height`	Maximum height of the action sheet
`--max-width`	Maximum width of the action sheet
`--min-height`	Minimum height of the action sheet
`--min-width`	Minimum width of the action sheet
`--width`	Width of the action sheet

Slots

No slots available for this component.

Inline Action Sheets (Recommended)​

Using isOpen​

Controller Action Sheets​

Buttons​

Collecting Role Information on Dismiss​

Theming​

Styling​

CSS Custom Properties​

Accessibility​

Interfaces​

ActionSheetButton​

ActionSheetOptions​

Properties​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

mode​

subHeader​

translucent​

trigger​

イベント​

メソッド​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents