Ionic 4 | Add Bottom to Up Menu / Action Sheets in Ionic Application without Native Plugin

In iPhones, you may have noticed that action options are shown in a sliding menu which pops out above screen sliding in from the bottom.

This is known as Action Sheet dialog mainly used to show some action buttons like in Facebook app they show options to report or flag post/images.

These are dismissed by pressing Back press event in Android but in IOS as there is no back button so a cancel button is provided.

to add an action sheet in Ionic 4 application we need to add ActionSheetController in the component where we want to call it.

Implementation of Action Sheet

We can easily add Action Sheet Dialog by importing ActionSheetController then defining it in the constructor as shown below

In buttons array we add the following object

text: Text of the button to show to the user.
role(optional): Any of three roles ‘cancel’ | ‘destructive’ | ‘selected’
handler: callback called after a button is tapped.
icon: Name of icon to show with a button.

Android

IOS

Action Sheet control provides a very handy option for developers to give actions to users. In Ionic 4 we can add Action Sheet to the user in a few simple steps as shown above. Check more details in docs here.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of