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);
});
}
更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。
网友评论