TECNOLOBO

No recuerdas tu codigo?
Se te olvido como se hace?

Aqui podras guardar lo que necesiten
Y cuando sea necesesario

Creado por julian gomez
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{

}