Version: v6

ion-action-sheet

An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in ios mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.

src/app/example.component.ts
src/app/example.component.html
src/app/example.component.css

import { Component } from '@angular/core';

import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent {
  result: string;

  constructor(private actionSheetCtrl: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetCtrl.create({
      header: 'Example header',
      subHeader: 'Example subheader',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          data: {
            action: 'delete',
          },
        },
        {
          text: 'Share',
          data: {
            action: 'share',
          },
        },
        {
          text: 'Cancel',
          role: 'cancel',
          data: {
            action: 'cancel',
          },
        },
      ],
    });

    await actionSheet.present();

    const result = await actionSheet.onDidDismiss();
    this.result = JSON.stringify(result, null, 2);
  }
}

<div class="container">
  <ion-button (click)="presentActionSheet()">Open</ion-button>
  <code *ngIf="result"> {{ result }} </code>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

code {
  white-space: pre-wrap;
}

Buttons

A button's role property can either be destructive or cancel. Buttons without a role property will have the default look for the platform. Buttons with the cancel role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the buttons array. Note: We recommend that destructive buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.

A button can also be passed data via the data property on ActionSheetButton. This will populate the data field in the return value of the onDidDismiss method.

Theming

Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector.

Styling

We recommend passing a custom class to cssClass in the create method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.

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

src/app/example.component.ts
src/app/example.component.html
src/global.css

import { Component } from '@angular/core';

import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent {
  constructor(private actionSheetCtrl: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetCtrl.create({
      header: 'Example header',
      subHeader: 'Example subheader',
      cssClass: 'my-custom-class',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          data: {
            action: 'delete',
          },
        },
        {
          text: 'Share',
          data: {
            action: 'share',
          },
        },
        {
          text: 'Cancel',
          role: 'cancel',
          data: {
            action: 'cancel',
          },
        },
      ],
    });

    actionSheet.present();
  }
}

<ion-button (click)="presentActionSheet()">Open</ion-button>

/* Note: These styles should be located in your global stylesheet */
ion-action-sheet.my-custom-class .action-sheet-group {
  background: #f58840;
}

ion-action-sheet.my-custom-class .action-sheet-title {
  color: #fff;
}

ion-action-sheet.my-custom-class .action-sheet-cancel::after {
  background: #e97223;
}

ion-action-sheet.my-custom-class .action-sheet-button,
ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
  color: #000000;
}

@media (any-hover: hover) {
  ion-action-sheet.my-custom-class .action-sheet-button:hover {
    color: #000000;
  }
}

ion-action-sheet.my-custom-class ion-backdrop {
  opacity: 0.6;
}

CSS Custom Properties

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

src/app/example.component.ts
src/app/example.component.html
src/global.css

import { Component } from '@angular/core';

import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent {
  constructor(private actionSheetCtrl: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetCtrl.create({
      header: 'Example header',
      subHeader: 'Example subheader',
      cssClass: 'my-custom-class',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          data: {
            action: 'delete',
          },
        },
        {
          text: 'Share',
          data: {
            action: 'share',
          },
        },
        {
          text: 'Cancel',
          role: 'cancel',
          data: {
            action: 'cancel',
          },
        },
      ],
    });

    actionSheet.present();
  }
}

<ion-button (click)="presentActionSheet()">Open</ion-button>

/* Note: These styles should be located in your global stylesheet */
ion-action-sheet.my-custom-class {
  --background: #f58840;
  --backdrop-opacity: 0.6;
  --button-background-selected: #e97223;
  --button-color: #000000;
  --color: #fff;
  /* role: "destructive" button iOS styling override */
  --ion-color-danger: #000000;
}

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	`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	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	アクションシートの提示時に使用するアニメーションです。
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	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`

Events

Name	Description
`ionActionSheetDidDismiss`	アラートが解除された後に発行されます。
`ionActionSheetDidPresent`	アラートが提示された後に発行されます。
`ionActionSheetWillDismiss`	アラートが解除される前に発行されます。
`ionActionSheetWillPresent`	アラートが提示される前に発行されます。

Methods

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 Custom Properties

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.

Buttons​

Theming​

Styling​

CSS Custom Properties​

Accessibility​

Interfaces​

ActionSheetButton​

ActionSheetOptions​

Properties​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

keyboardClose​

leaveAnimation​

mode​

subHeader​

translucent​

Events​

Methods​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Contents

Buttons

Theming

Styling

CSS Custom Properties

Accessibility

Interfaces

ActionSheetButton

ActionSheetOptions

Properties

animated

backdropDismiss

buttons

cssClass

enterAnimation

header

htmlAttributes

keyboardClose

leaveAnimation

mode

subHeader

translucent

Events

Methods

dismiss

onDidDismiss

onWillDismiss

present

CSS Shadow Parts

CSS Custom Properties

Slots