ion-action-sheet

Contents

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.

Creating

An action sheet can be created by the Action Sheet Controller from an array of buttons, with each button including properties for its text, and optionally a handler and role. If a handler returns false then the action sheet will not be dismissed. An action sheet can also optionally have a title, subTitle and an icon.

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.

Usage

angular javascript react vue
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();
  }

}
async function presentActionSheet() {
  const actionSheetController = document.querySelector('ion-action-sheet-controller');
  await actionSheetController.componentOnReady();

  const actionSheet = await 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();
}
import React, { Component } from 'react'
import { IonActionSheet } from '@ionic/react';

type Props = {}
type State = {
  showActionSheet: boolean
}

export default class ActionSheetExample extends Component<Props, State> {

  constructor(props: Props) {
    super(props);
    this.state = {
      showActionSheet: false
    };
  }

  render() {
    return (
      <IonActionSheet
        isOpen={this.state.showActionSheet}
        onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
        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');
          }
        }]}
      >
      </IonActionSheet>
    );
  }
}
<template>
  <IonVuePage :title="'Action Sheet'">
    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
  </IonVuePage>
</template>

<script>
export default {
  methods: {
    presentActionSheet() {
      return this.$ionic.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')
              },
            },
          ],
        })
        .then(a => a.present())
    },
  },
}
</script>

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)[]
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

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 string | undefined

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

Name Description
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>

CSS Custom Properties

Name Description
--background Background of the action sheet group
--background-activated Background of the activated action sheet button
--background-selected Background 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