Ionic Action Sheets
Ionic components are made of high-level building blocks, which is known as components. These components allow us to construct the interface of the app quickly. The Ionic Framework contains many built-in components, which are buttons, modals, popups, lists, cards, etc. Here, we are going to learn about how the component looks like and how to use them.
An Action Sheet is a dialog which allows us to choose to confirm or cancel an action from a set of options. It always appears top of any other components on the page and must be dismissed manually by the user to interact with the app. When the Action Sheets are triggered, the rest of the page darkens to give more focus to the options of the Action Sheets.
Sometimes, we use the Action Sheets as an alternative to the menus. However, it should not be used for navigation.
We can understand the working of Action Sheet Components through the below example.
home.page.ts
It is the main page of the Ionic app, which is responsible for the user interface. Here, we are creating a menu, which contains destructive, archive, and cancel element.
home.page.html
This HTML page is responsible for designing (look and feel) of your home page. It also contains the actions on HTML elements like button element.
home.page.scss
It is the CSS file which contains the additional styles on the HTML elements.
Output
Now, execute the application on your terminal through the command given below.
It gives the output as like below screen. Now, if you use an IDE, and modify or changes anything in the code, then after modification, as soon as you save the file, the browser automatically reloads your app.
Now, click on the Show Action Sheet button, the below output appears on your screen. When the Action Sheets are triggered, the rest of the page darkens to give more focus to the options of the Action Sheets.
The $ionicActionSheet.show() method also contains several useful parameters, which we can see in the following table.
| Properties | Type | Descriptions |
|---|---|---|
| buttons | Object | It creates the button object with a text field. |
| titleText | String | It sets the title of the Action Sheet. |
| cancelText | String | It sets the text for cancel button. |
| destructiveText | String | It sets the text for destructive button. |
| cancel | Function | It is called when the cancel button, backdrop or hardware back button is pressed. |
| buttonClicked | Function | It is called when one of the buttons is tapped. Here, the index is used for keeping track of which button is tapped. If it returns true, the Action Sheet will be closed. |
| destructiveButtonClicked | Function | It is called when the destructive button is clicked. If it returns true, the Action Sheet will be closed. |
| cancelOnStateChange | boolean | It is by default true, which cancel the Action Sheet when navigation state is changed. |