ionic2 — Action Sheets

http://ionicframework.com/docs/v2/components/#action-sheets

Action Sheets从设备底部屏幕滑出，可以显示一些选项如确定或取消。Action Sheets有时候被用来作为菜单，但不应该被用来导航。

Action Sheets经常显示在页面其他组件的上面，并且必须在触摸其他内容的时候消失。当Action Sheets被触发的时候，页面其他内容将会变暗，使用户聚焦于Action Sheets的选项上。

更多内容请查看API文档。

基本用法

(1)ionic-angular

angular() {

let actionSheet = this.actionSheetCtrl.create({

title: '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');

}

}

]

});

actionSheet.present();

this.navCtrl.push(ActionSheetBasicPage);

}

(2)ionic-native只能在手机上才能看到效果

native() {

let buttonLabels = ['Share via Facebook',

'Share via Twitter'];

ActionSheet.show({

'title': 'What do you want with this image?',

'buttonLabels': buttonLabels,

'addCancelButtonWithLabel': 'Cancel',

'addDestructiveButtonWithLabel' : 'Delete'

}).then((buttonIndex: number) => {

console.log('Button pressed: ' + buttonIndex);

});

}

前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

脑筋急转弯：

生活小窍门