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@4
   

2. Add this plugin to your app's module

Supported platforms

• Android
• Browser
• iOS
• Windows
• Windows Phone 8

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.

hide(options)

Programmatically hide the native ActionSheet

ActionSheetOptions