'ion-action-sheet' is a component in the Ionic framework that displays a modal dialog with a set of options for the user to choose from. Here's how you can use it in your Ionic application:
1. The ion-action-sheet element defines the action sheet. The title attribute sets the title of the action sheet, and the buttons attribute specifies the buttons to be displayed in the sheet. The cancel-text attribute sets the text of the cancel button, and the cancel attribute specifies the function to be called when the cancel button is clicked.2. The ng-click directive on the div element calls the showActions() function when the user clicks on the "Open Action Sheet" button.
3. The showActions() function uses the $ionicActionSheet service to display the action sheet. The buttons option specifies the buttons to be displayed, and the titleText and cancelText options set the text of the title and cancel buttons, respectively. The buttonClicked and cancel options specify the functions to be called when the user clicks on a button or cancels the action sheet.
We ne to declare three variables
result: string | undefined;
action: string | undefined;
text: string | undefined;
Create an array of ActionSheetButton objects. Each ActionSheetButton object represents an option in the action sheet. Specify the text property to set the text that will be displayed for the option, and optionally specify an icon property to display an icon alongside the text.
public actionSheetButtons = [
{
text: 'Delete',
role: 'delete button role',
data: {
action: 'delete',
},
},
{
text: 'Share',
role: 'share button role',
data: {
action: 'share',
},
},
{
text: 'Cancel',
role: 'cancel button role',
data: {
action: 'cancel',
},
},
];
Constructor
In Ionic, a constructor is a special method that is automatically called when a new instance of a component or page is created. It is typically used to initialize properties and perform other setup tasks that are required for the component or page to function properly.To define a constructor in an Ionic component or page, you simply add a method with the name constructor to the class definition. For example, here is a simple Ionic component with a constructor:
constructor() {
this.text = ""
}
Collecting Role Information on Dismiss
We need to create un function to get the result of button action sheet when clicked:
setResult(ev: any) {
this.action = ev.detail.role;
this.result = ev.detail.data.action;
if (this.result == "delete") {
// Here you can delete
this.text = "Here you can delete";
} else if (this.result == "share") {
// Here you can present share button
this.text = "Here you can present share button";
} else {
// Dissmais action sheet
this.text = "Dissmais action sheet";
}
}
Here's the complete code:
home.Page.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
result: string | undefined;
action: string | undefined;
text: string | undefined;
public actionSheetButtons = [
{
text: 'Delete',
role: 'delete button role',
data: {
action: 'delete',
},
},
{
text: 'Share',
role: 'share button role',
data: {
action: 'share',
},
},
{
text: 'Cancel',
role: 'cancel button role',
data: {
action: 'cancel',
},
},
];
constructor() {
this.text = ""
}
setResult(ev: any) {
this.action = ev.detail.role;
this.result = ev.detail.data.action;
if (this.result == "delete") {
// Here you can delete
this.text = "Here you can delete";
} else if (this.result == "share") {
// Here you can present share button
this.text = "Here you can present share button";
} else {
// Dissmais action sheet
this.text = "Dissmais action sheet";
}
}
}
To use ion-action-sheet in your HTML file
html.page.html
<ion-header [translucent]="true">
<ion-toolbar color="primary">
<ion-title>
ion-action-sheet
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<div class="container">
<p>
Here we show the result of each action of the choice.
<ion-text color="danger">{{text}}</ion-text>
</p>
<h2 *ngIf="result">Your choice is {{result}}</h2>
<h4 *ngIf="action">{{action}}</h4>
<ion-button id="open-action-sheet">Open sheet</ion-button>
<ion-action-sheet
trigger="open-action-sheet"
header="Example header"
subHeader="Example subheader"
[buttons]="actionSheetButtons"
(didDismiss)="setResult($event)">
</ion-action-sheet>
</div>
</ion-content>
Working with CSS in Ionic:
1. Ionic uses a customized version of the CSS preprocessor Sass, which allows for more powerful and efficient CSS authoring.2. Ionic comes with a set of pre-built CSS components and utilities that you can use to style your app. These components are designed to be flexible and customizable, allowing you to quickly build complex UI layouts.
3. You can customize the styling of Ionic components by overriding their default CSS styles. This can be done either by adding your own CSS styles to the component or by using CSS variables to modify the component's appearance.
4. Ionic provides several ways to organize and structure your CSS code, including using global styles, component-specific styles, and utility classes.
5. To ensure a consistent look and feel across different platforms and devices, Ionic follows a set of design guidelines called the Ionic Design System. These guidelines provide recommendations on typography, color, layout, and other design elements that can be used to create a visually appealing and user-friendly mobile app.
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
p {
margin-left: 16px;
}
Concluding
Action Sheets are given a role of dialog. In order to align with the ARIA spec, either the aria-label or aria-labelledby attribute must be set.It is strongly recommended that every Action Sheet have the header property defined, as Ionic will automatically set aria-labelledby to point to the header element. However, if you choose not to include a header, an alternative is to use the htmlAttributes property to provide a descriptive aria-label or set a custom aria-labelledby value.