Categorias
iiiiii
componente action sheet
Descripcion
Uso del componente action sheet
Nota
<ion-button (click)="presentActionSheet()" expand="block">
Action sheet
</ion-button>
html
import { Component, OnInit } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
@Component({
selector: 'app-action-sheet',
templateUrl: './action-sheet.page.html',
styleUrls: ['./action-sheet.page.scss'],
})
export class ActionSheetPage implements OnInit {
result: string='';
constructor(private actionSheetCtrl: ActionSheetController) { }
ngOnInit() {
}
async presentActionSheet() {
const actionSheet = await this.actionSheetCtrl.create({
header: 'Example header',
backdropDismiss:false, //Esto impide que el usuario salga de la ventana si dar ninguna opcion
subHeader: 'Example subheader',
buttons: [
{
text: 'Delete',
role: 'destructive',
/*handler:()=>{
console.log("se presiono boton");
},*/
data: {
action: 'delete',
},
},
{
text: 'Share',
data: {
action: 'share',
},
},
{
text: 'Cancel',
role: 'cancel',
data: {
action: 'cancel',
},
},
],
});
await actionSheet.present();
const result = await actionSheet.onDidDismiss();
//this.result = JSON.stringify(result, null, 2);
console.log(result.data.action);
}
}
typescript
/*Estilos personalizados en el archivo global.css*/
.miclase{
}