ionic ActionSheet(上拉菜单)

1、$ionicActionSheet
ionic的上拉菜单由三种按钮组成，点击任何按钮都自动关闭上拉菜单;

取消按钮 - 取消按钮总是位于菜单的底部，用户点击该按钮将关闭。一个上拉菜单最多有一个取消按钮。
危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个危险选项按钮。
自定义按钮 - 用户定义的任意数量的按钮。

2、参数
titleText - 上拉菜单的标题文本
buttons - 自定义按钮数组。每个按钮需要一个描述对象，其text字段用于按钮显示
cancelText - 取消按钮的文本。如果不设置此字段，则上拉菜单中不出现取消按钮
destructiveText - 危险选项按钮的文本。如果不设置此字段，则上拉菜单中不出现危险选项按钮
buttonClicked - 自定义按钮的回调函数，当用户点击时触发
cancel - 取消按钮回调函数，当用户点击时触发
destructiveButtonClicked - 危险选项按钮的回调函数，当用户点击时触发
cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
cssClass - 附加的CSS样式类名称

1、Html

<ion-header-bar class="bar bar-header bar-light bar-calm"><button class="button button-icon icon ion-navicon"></button><ion-title class="bar-calm">腾讯新闻</ion-title>
</ion-header-bar><ion-content><button class="button button-dark" ng-click="show()">show</button>
</ion-content>

2、Controllerl

appCntrollers.controller('ManageActionSheetCtrl', function ($scope, $timeout, $ionicActionSheet) {// 点击按钮触发，或一些其他的触发条件$scope.show = function () {// 显示操作表$ionicActionSheet.show({titleText: '修改你的专辑',destructiveText: '删除',cancelText: '取消',buttons: [{ text: '<b>分享</b> 快乐' },{ text: '拍摄照片' },{ text: '相册选择' },],cancel: function () {alert('取消事件！');},destructiveButtonClicked: function () {alert('删除事件！');return true;},buttonClicked: function (index) {switch (index) {case 0://appendByCamera();alert('分享快乐');break;case 1:alert('拍摄照片');break;case 2:alert('相册选择');break;default:break;}return true;}});};
})

3、效果图

ionic ActionSheet(上拉菜单)相关推荐

IOS基础：ActionSheet(上拉菜单）的实现
一看图就明白了,毋需多说. [java] view plaincopyprint? UIActionSheet* mySheet = [[UIActionSheet alloc] initWithTi ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
Bootstrap 按钮上拉菜单
按钮上拉菜单按钮菜单不仅可以下拉,也可以上拉.要把默认的下拉改成上拉,只要为 .btn-group 容器追加一个 .dropup 类就行了.如: <div class="btn-gr ...
android上拉菜单和下拉菜单的实现
android关于下拉菜单功能网上有很多实现demo,但我想要的是上拉菜单,如下图: 参考网上下拉菜单实现demo(http://www.apkbus.com/android-51289-1-1.ht ...
vue封装上拉菜单组件_Vue的灵活的lil上下文菜单组件
vue封装上拉菜单组件 vue-lil上下文菜单 (vue-lil-context-menu) A flexible context menu component for Vue. Pass it a ...
华为上拉添加计算机,华为底部上拉菜单 | 手游网游页游攻略大全
发布时间:2015-10-12 拿到iPhone使用了那么久,你的顶部下拉菜单是不是还是老样子呢?又或者说删除了不用的功能直接弃用了这块位置呢?小编告诉你,iPhone下拉菜单可以这么玩,手机利用率大 ...
菜单向上拉html,模拟select控件，CSS上拉菜单
模拟select控件,CSS下拉菜单模拟select控件 html,body{height:100%;overflow:hidden;} body,div,form,h2,ul,li{margin: ...
微信小程序点击按钮弹出弹窗_微信小程序点击按钮弹出底部上拉菜单
小程序底部弹出菜单操作.gif html //index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{{menu}} js //index.js Pag ...
angular——更多按钮的上拉菜单（路由跳转）
<button class="btn gray_text_btn list_item" ng-click="action.toMoreOptions()" ...

ionic ActionSheet(上拉菜单)

ionic ActionSheet(上拉菜单)相关推荐

最新文章

热门文章