The ActionSheet plugin shows a dialog containing a native list of options the user can choose from. Requires Cordova plugin: Cordova-plugin-actionsheet. We can add ActionSheet from ionic native plugin and ActionSheet from a controller.
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.
We can have a button that will display on top of a current page with an option like select from a camera, Gallery. Or we can have a list of social networking option to select. In this articles, we will learn how to add ActionSheet through a native plugin.
Steps 1: Create a new project
ionic start actionSheet blank
Step 2: Install the required plugin
ionic cordova plugin add –save cordova-plugin-actionsheet
npm install –save @ionic-native/action-sheet
Step 3: Add actionSheet provider in app/app.module.ts
Step 4: Add our project user interface. Add following code in pages/home/home.html
Step 5: We need to import and inject ActionSheet in home.ts
|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||number||Range from Theme to be used on Android 1 to 5 (optional)|