| Oct | NOV | Dec |
| 09 | ||
| 2021 | 2022 | 2023 |
COLLECTED BY
Collection: News: Russia
Learn the differences between hybrid and native apps. We break down all the myths and misconceptions.
Read the free eBook →
Cross-platform mobile UI
// action-sheet-example.component.tsimport { Component } from '@angular/core';import { ActionSheetController } from '@ionic/angular';@Component({selector: 'action-sheet-example',templateUrl: 'action-sheet-example.component.html',styleUrls: ['./action-sheet-example.component.css'],})export class ActionSheetExample {constructor(private actionSheetController: ActionSheetController) {}async presentActionSheet() {const actionSheet = await this.actionSheetController.create({header: 'Albums',cssClass: 'my-custom-class',buttons: [{text: 'Delete',role: 'destructive',icon: 'trash',id: 'delete-button',data: {type: 'delete'},handler: () => {console.log('Delete clicked');}}, {text: 'Share',icon: 'share',data: 10,handler: () => {console.log('Share clicked');}}, {text: 'Play (open modal)',icon: 'caret-forward-circle',data: 'Data value',handler: () => {console.log('Play clicked');}}, {text: 'Favorite',icon: 'heart',handler: () => {console.log('Favorite clicked');}}, {text: 'Cancel',icon: 'close',role: 'cancel',handler: () => {console.log('Cancel clicked');}}]});await actionSheet.present();const { role, data } = await actionSheet.onDidDismiss();console.log('onDidDismiss resolved with role and data', role, data);}}<!-- action-sheet-example.component.html --><ion-button (click)="presentActionSheet()">Show Action Sheet</ion-button>
JS Agnostic
ionic/vue
ionic/react
ionic/angular
Performance obsessed
Feel the love
Follow on Twitter
Star us on GitHub
Join our Forum
Say Hi on Discord