ionicActionSheet decorator example
Ionic ionicActionSheet
Decorator Example
Here's an example of how to use the ionicActionSheet
decorator in Ionic:
import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public actionSheetController: ActionSheetController) {}
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Options',
buttons: [
{
text: 'Option 1',
handler: () => {
console.log('Option 1 clicked');
}
},
{
text: 'Option 2',
handler: () => {
console.log('Option 2 clicked');
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
await actionSheet.present();
}
}
This example demonstrates how to use the ionicActionSheet
decorator in an Ionic application. The ionicActionSheet
decorator is used to create a customizable action sheet that displays a set of options to the user.
In the example code, the presentActionSheet
method is defined to handle the presentation of the action sheet. Inside the method, the ActionSheetController
is injected and used to create the action sheet. The create
method is called with an object that defines the header and buttons of the action sheet.
Each button is defined as an object with properties such as text
(the button label) and handler
(a function to be executed when the button is clicked). The role
property can be used to specify a special role for a button, such as "cancel" in the example code.
Finally, the present
method is called on the action sheet to display it to the user.
This is a basic example of how to use the ionicActionSheet
decorator in an Ionic application. You can customize the action sheet further by adding more buttons or modifying the existing ones to suit your needs.