กดปุ่มแล้วมี Sheet เด้งขึ้นมา
แก้ไขไฟล์ src/pages/home/home.html
โดยเพิ่มปุ่ม และเมื่อปุ่มถูกกดให้เรียกฟังก์ชัน openMenu()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding class="action-sheets-basic-page"> <button ion-button block (click)="openMenu()"> Show Action Sheet </button> </ion-content> |
บรรทัดที่ 9: กำหนดคลาส
บรรทัดที่ 10: เมื่อคลิกที่ปุ่มเรียกใช้ฟังก์ชัน openMenu()
แก้ไขไฟล์ src/pages/home/home.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Platform, ActionSheetController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, public platform: Platform, public actionsheetCtrl: ActionSheetController ) { } openMenu() { let actionSheet = this.actionsheetCtrl.create({ title: 'Albums', cssClass: 'action-sheets-basic-page', buttons: [ { text: 'Delete', role: 'destructive', icon: !this.platform.is('ios') ? 'trash' : null, handler: () => { console.log('Delete clicked'); } }, { text: 'Share', icon: !this.platform.is('ios') ? 'share' : null, handler: () => { console.log('Share clicked'); } }, { text: 'Play', icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null, handler: () => { console.log('Play clicked'); } }, { text: 'Favorite', icon: !this.platform.is('ios') ? 'heart-outline' : null, handler: () => { console.log('Favorite clicked'); } }, { text: 'Cancel', role: 'cancel', // will always sort to be on the bottom icon: !this.platform.is('ios') ? 'close' : null, handler: () => { console.log('Cancel clicked'); } } ] }); actionSheet.present(); } } |