Create ActionSheet in Ionic 3

An Action Sheet is a dialog which allows us to choose to confirm or cancel an action from a set of options. It always appears top of any other components on the page and must be dismissed manually by the user to interact with the app. When the Action Sheets are triggered, the rest of the page darkens to give more focus to the options of the Action Sheets. There are easy ways to cancel out of the action sheet, such as tapping the backdrop or hitting the escape key on desktop. In this tutorial we will create actionsheet in ionic 3.

Mostly we uses the actionsheet in our app to display a set of options. It can be alternative of alerts or popups, popovers or menus. Read more about ActionSheets here.

Create a component and paste the code given below.

import { Component } from '@angular/core';  
import {ActionSheetController } from '@ionic/angular';  
  
@Component({  
  selector: 'app-home',  
  templateUrl: 'home.page.html',  
  styleUrls: ['home.page.scss'],  
})  
export class HomePage {  
  constructor(  
    public actionsheetCtrl: ActionSheetController  
  ) { }  
  
  async openMenu() {  
    const actionSheet = await this.actionsheetCtrl.create({  
      header: 'Modify your album',  
      buttons: [  
        {  
          text: 'Destructive',  
          role: 'destructive',  
          handler: () => {  
            console.log('Destructive clicked');  
          }  
        },{  
          text: 'Archive',  
          handler: () => {  
            console.log('Archive clicked');  
          }  
        }, {  
          text: 'Cancel',  
          role: 'cancel',  
          handler: () => {  
            console.log('Cancel clicked');  
          }  
        }  
      ]  
    });  
    await actionSheet.present();  
  }  
}

Create HTML template and paste the code given below.

<ion-header>  
  <ion-toolbar>  
    <ion-title>  
      Action Sheets  
    </ion-title>  
  </ion-toolbar>  
</ion-header>  
  
<ion-content class="ion-padding" class="action-sheets-home-page">  
  <button ion-button block (click)="openMenu()">  
    Show Action Sheet  
  </button>  
</ion-content>

Paste this css in your .scss file to style the actionsheet.

.action-sheet-home-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;  
    }  
  }

Execute the app using the commands given below

In browser:
ionic serve

In Android or Emulator:
ionic cordova run android

In IOS or Emulator:
ionic cordova run ios

Now, you can create actionsheet in ionic 3 app.

For more Ionic Tutorials visit Ionic page.

If you like this, share this.