Membuat Menu Sheet (IONIC)

Langkah Pembuatan

Sebelum membuat menu sheet terlebih dahulu masuk ke folder src->pages->home seperti gambar dibawah

• Dibagian file home.html tambahkan code berikut

• <ion-header>
    <ion-navbar>
      <ion-title>
        CodeTR
      </ion-title>
    </ion-navbar>
  </ion-header>
  
  <ion-content padding>
    <p>Belajar Membuat Menu Sheets</p>
  
    <ion-content padding class="action-sheets-basic-page">
    <button ion-button block (click)="openMenu()">
      Tampilkan Menu
    </button>
  </ion-content>
  </ion-content>

• Dibagian file home.scss tambahkan code

• .action-sheets-basic-page {
    .ion-md-share {
      color: #ED4248;
    }
    .ion-md-arrow-dropright-circle {
      color: #508AE4;
    }
    .ion-md-heart-outline {
      color: #31D55F;
    }
    .action-sheet-cancel ion-icon,
    .action-sheet-destructive ion-icon {
      color: #757575;
    }
  }

• Terakhir dibagian home.ts tambahkan code berikut

• import { Component } from '@angular/core';
  import { Platform, ActionSheetController } from 'ionic-angular';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  
    constructor(
      public platform: Platform,
     public actionsheetCtrl: ActionSheetController
    ) {}
  
    openMenu() {
        let actionSheet = this.actionsheetCtrl.create({
          title: 'Menu',
          cssClass: 'action-sheets-basic-page',
          buttons: [
            {
              text: 'Hapus',
              role: 'destructive',
              icon: !this.platform.is('ios') ? 'trash' : null,
              handler: () => {
                console.log('Delete clicked');
              }
            },
            {
              text: 'Batal',
              role: 'cancel',
              icon: !this.platform.is('ios') ? 'close' : null,
              handler: () => {
                console.log('Cancel clicked');
              }
            }
          ]
        });
        actionSheet.present();
      }
  }

• Jalankan aplikasi dengan perintah ionic serve 

Sekian artikel dari saya semoga bermanfaat.