Ionic JS - Action Sheet

Content

 

Action Sheet (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 the desktop.

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

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.html',
  styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

}

 

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.
    • Type: (string | ActionSheetButton)[]
  • 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
  • enterAnimation
    • Description: Animation to use when the action sheet is presented.
    • Type: ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
  • header
    • Description: Title for the action sheet.
    • Attribute: header
    • Type: header
  • 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.
    • Type: ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"
  • subHeader
    • Description: Subtitle for the action sheet.
    • Attribute: sub-header
    • Type: string | 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

  • ionActionSheetDidDismiss - Emitted after the alert has dismissed.
  • ionActionSheetDidPresent - Emitted after the alert has presented.
  • ionActionSheetWillDismiss - Emitted before the alert has dismissed.
  • ionActionSheetWillPresent - Emitted before the alert has presented.

Methods

  • dismiss
    • Description: Dismiss the action sheet overlay after it has been presented.
    • Signature: dismiss(data?: any, role?: string | undefined) => Promise<boolean>
  • onDidDismiss
    • Description: Returns a promise that resolves when the action-sheet did dismiss.
    • Signature: onDidDismiss() => Promise<OverlayEventDetail<any>>
  • onWillDismiss
    • Description: Returns a promise that resolves when the action-sheet will dismiss.
    • Signature: onWillDismiss() => Promise<OverlayEventDetail<any>>
  • present
    • Description: Present the action sheet overlay after it has been created.
    • Signature: present() => Promise<void>

 

Action Sheet Controller (ion-action-sheet-controller)

Action Sheet controllers programmatically control the action sheet component. Action Sheets can be created and dismissed from the action sheet controller. 

  • create
    • Description: Create an action sheet overlay with action sheet options.
    • Signature: create(opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
  • dismiss
    • Description: Dismiss the open action sheet overlay.
    • Signature: dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
  • getTop
    • Description: Get the most recently opened action sheet overlay.
    • Signature: getTop() => Promise<HTMLIonActionSheetElement | undefined>