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() {}

}