Skip to main content
Version: v5

Action Sheet

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.

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

Stuck on a Cordova issue?

Don't waste precious time on plugin issues.

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

Installation

$ npm install cordova-plugin-actionsheet 
$ npm install @awesome-cordova-plugins/action-sheet
$ ionic cap sync

Supported Platforms

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

Usage

React

Learn more about using Ionic Native components in React

Angular

import { ActionSheet, ActionSheetOptions } from '@awesome-cordova-plugins/action-sheet/ngx';

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