How to Create Action Sheet on Ionic Framework

ionic framework - action sheet

ion-action-sheet

How to Create Action Sheet on Ionic Framework – Brilliansolution. 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.

ionic framework - action sheet

src/app/example.component.ts

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

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

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

CSS Custom Properties

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

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

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

Copy

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

Copy

Properties

animated

DescriptionIf true, the action sheet will animate.
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

DescriptionIf true, the action sheet will be dismissed when the backdrop is clicked.
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons

DescriptionAn array of buttons for the action sheet.
Attributeundefined
Type(string | ActionSheetButton<any>)[]
Default[]

cssClass

DescriptionAdditional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

enterAnimation

DescriptionAnimation to use when the action sheet is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined
DescriptionTitle for the action sheet.
Attributeheader
Typestring | undefined
Defaultundefined

htmlAttributes

DescriptionAdditional attributes to pass to the action sheet.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

keyboardClose

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

DescriptionAnimation to use when the action sheet is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

subHeader

DescriptionSubtitle for the action sheet.
Attributesub-header
Typestring | undefined
Defaultundefined

translucent

DescriptionIf true, the action sheet will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

Events

NameDescription
ionActionSheetDidDismissEmitted after the alert has dismissed.
ionActionSheetDidPresentEmitted after the alert has presented.
ionActionSheetWillDismissEmitted before the alert has dismissed.
ionActionSheetWillPresentEmitted before the alert has presented.

Methods

dismiss

DescriptionDismiss the action sheet overlay after it has been presented.
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss

DescriptionReturns a promise that resolves when the action sheet did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

DescriptionReturns a promise that resolves when the action sheet will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

DescriptionPresent the action sheet overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--backdrop-opacityOpacity of the backdrop
--backgroundBackground of the action sheet group
--button-backgroundBackground of the action sheet button
--button-background-activatedBackground of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
--button-background-activated-opacityOpacity of the action sheet button background when pressed
--button-background-focusedBackground of the action sheet button when tabbed to
--button-background-focused-opacityOpacity of the action sheet button background when tabbed to
--button-background-hoverBackground of the action sheet button on hover
--button-background-hover-opacityOpacity of the action sheet button background on hover
--button-background-selectedBackground of the selected action sheet button
--button-background-selected-opacityOpacity of the selected action sheet button background
--button-colorColor of the action sheet button
--button-color-activatedColor of the action sheet button when pressed
--button-color-focusedColor of the action sheet button when tabbed to
--button-color-hoverColor of the action sheet button on hover
--button-color-selectedColor of the selected action sheet button
--colorColor of the action sheet text
--heightheight of the action sheet
--max-heightMaximum height of the action sheet
--max-widthMaximum width of the action sheet
--min-heightMinimum height of the action sheet
--min-widthMinimum width of the action sheet
--widthWidth of the action sheet

Slots

No slots available for this component.

brillian

Leave a Reply

%d bloggers like this: