ionic3 Actionsheet的使用

1. 安装。使用时需要你已经安装好ionic Android环境      

ionic cordova plugin add cordova-plugin-actionsheet      

npm install --save @ionic-native/action-sheet      

2.html代码      

<
   ion-header
   >
  
    
   <
   ion-navbar
   >
  
      
   <
   ion-title
   >actionsheets
   </
   ion-title
   >
  
    
   </
   ion-navbar
   >
  
  
   </
   ion-header
   >
  
  
   <
   ion-content
   >
  
    
   <
   button 
   ion-button (
   click)=
   "changeActionSheet()" 
   color=
   "danger"
   >Actionsheet
   </
   button
   >
  
  
   </
   ion-content
   >
  
 
      

3.ts代码      

import { 
   Component } 
   from 
   '@angular/core';
  
  
   import { 
   IonicPage, 
   NavController, 
   NavParams } 
   from 
   'ionic-angular';
  
  
   import { 
   ActionSheet, 
   ActionSheetOptions } 
   from 
   '@ionic-native/action-sheet';
  
  
   @
   IonicPage()
  
  
   @
   Component({
  
    
   selector: 
   'page-actionsheets',
  
    
   templateUrl: 
   'actionsheets.html',
  
  
   })
  
  
   export 
   class 
   ActionsheetsPage {
  

    
   constructor(
   public 
   navCtrl: 
   NavController, 
   public 
   navParams: 
   NavParams,
   private 
   actionSheet: 
   ActionSheet) {
  
  
     }
  
    
   ionViewDidLoad() {
  
      
   console.
   log(
   'ionViewDidLoad ActionsheetsPage');
  
  
     }
  
    
   changeActionSheet(){
  
      
   this.
   actionSheet.
   show(
   options).
   then((
   buttonIndex: 
   number) 
   => {
  
        
   console.
   log(
   'Button pressed: ' + 
   buttonIndex);
  
  
           });
  
  
     }
  
  
   }
  
  
   let 
   buttonLabels = [
   '确定', 
   '取消'];
  
  
   const 
   options: 
   ActionSheetOptions = {
  
  
   title: 
   '你确定删除吗',
  
  
   subtitle: 
   'Choose an action',
  
  
   buttonLabels: 
   buttonLabels,
  
  
   addCancelButtonWithLabel: 
   '返回',
  
  
   addDestructiveButtonWithLabel: 
   '删除',
  
  
   androidTheme:
   5,
  
  
   //主题是1到5，个人喜欢5 颜色黑字白底 简约
  
  
   destructiveButtonLast: 
   true
  
  
   };
  
 4.module.ts      

import { 
   NgModule } 
   from 
   '@angular/core';
  
  
   import { 
   IonicPageModule } 
   from 
   'ionic-angular';
  
  
   import { 
   ActionsheetsPage  } 
   from 
   './actionsheets';
  
  
   import { 
   ActionSheet } 
   from 
   '@ionic-native/action-sheet';
  

  
   @
   NgModule({
  
    
   declarations: [
  
      
   ActionsheetsPage,
  
  
     ],
  
    
   imports: [
  
      
   IonicPageModule.
   forChild(
   ActionsheetsPage),
  
  
     ],
  
    
   providers: [
  
      
   ActionSheet
  
  
     ]
  
  
   })
  


  
   export 
   class 
   ActionsheetsPageModule {
  
    
   constructor() {}
  

  
   }