Ionic Framework 4 is almost here. Preview the beta docs and try it out now! Try Ionic 4 Beta

Action Sheet

Improve this doc

The ActionSheet plugin shows a native list of options the user can choose from.

Requires Cordova plugin: cordova-plugin-actionsheet. For more info, please see the ActionSheet plugin docs.

Repo: https://github.com/EddyVerbruggen/cordova-plugin-actionsheet

Installation

  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add cordova-plugin-actionsheet
    $ npm install --save @ionic-native/action-sheet
    
  2. Add this plugin to your app's module

Supported platforms

Usage

import { ActionSheet, ActionSheetOptions } from '@ionic-native/action-sheet';

constructor(private actionSheet: ActionSheet) { }

...


let buttonLabels = ['Share via Facebook', 'Share via Twitter'];

const options: ActionSheetOptions = {
  title: 'What do you want with this image?',
  subtitle: 'Choose an action',
  buttonLabels: buttonLabels,
  addCancelButtonWithLabel: 'Cancel',
  addDestructiveButtonWithLabel: 'Delete',
  androidTheme: this.actionSheet.ANDROID_THEMES.THEME_HOLO_DARK,
  destructiveButtonLast: true
};

this.actionSheet.show(options).then((buttonIndex: number) => {
  console.log('Button pressed: ' + buttonIndex);
});

Instance Members

ANDROID_THEMES

Convenience property to select an Android theme value

show(options)

Show a native ActionSheet component. See below for options.

Param Type Details
options ActionSheetOptions

Options See table belowOptional

Returns: Promise<any> Returns a Promise that resolves with the index of the button pressed (1 based, so 1, 2, 3, etc.)

hide(options)

Programmatically hide the native ActionSheet

Param Type Details
options ActionSheetOptions

Options See table belowOptional

Returns: Promise<any> Returns a Promise that resolves when the actionsheet is closed

ActionSheetOptions

Param Type Details
buttonLabels string[]

The labels for the buttons. Uses the index x

title string

The title for the actionsheet

(optional)
subtitle string

The subtitle for the actionsheet (IOS only)

(optional)
androidTheme

Theme to be used on Android

(optional)

API

Native

General