ionic ActionSheet(上拉選單)
阿新 • • 發佈:2019-02-17
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、效果圖