Menu pull-up (Actionheet) memungkinkan pengguna untuk memilih opsi melalui kotak yang muncul.
Opsi yang sangat berbahaya akan dikenali dalam warna merah yang disorot. Anda dapat membuatnya menghilang dengan mengklik tombol Batal atau mengklik ruang kosong.
Contoh
Kode HTML
<body ng-app = "starter" ng-controller = "actionheetctl"> <ion-pane> <eon-content> <h2 ng-click = "show ()"> Lembar Aksi </h2> </ion-content> </ion-pane> </body>
Kode JavaScript
Memicu menu pull-up dalam kode membutuhkan layanan $ ionicactionsheet di pengontrol sudut Anda:
angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// Sembunyikan bilah aksesori secara default (hapus ini untuk menampilkan bilah aksesori di atas keyboard // untuk input form) if (window.cordova & window.cordova.cord.cordov.cordov.cordov.cordov. Windowin. {cordova.plugins.keyboard.hideKeyboardAccessoryBar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). Controller ('Actionheetctl', ['$ scope', '$ ionicactionscactions', '$ timeout', $ timeout ' ,function($scope,$ionicActionSheet,$timeout){$scope.show = function() {var hideSheet = $ionicActionSheet.show({buttons: [{ text: '<b>Share</b> This' },{ text: 'Move' }],destructiveText: 'Delete',titleText: 'Modify your album',cancelText: 'Batal', batal: function () {// Tambahkan kode BATIK ..}, ButtonClicked: function (index) {return true;}}); $ timeout (function () {hidesheet ();}, 2000);};Efek operasi adalah sebagai berikut:
Kode Sumber Lengkap:
<html> <head> <meta charset = "utf-8"> <meta name = "viewport" konten = "skala awal = 1, skala maksimum = 1, skala user = no, lebar = device-width"> <it title> <title> <link href = "http://cdn.bootc.cscom.cs.c.s.1.1.1..1..1.1..1.1. rel = "stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.js"> </script> <script type = "text/javascript"> funche ('starter', ['ionic'). {$ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard// for form inputs)if(window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if(window.StatusBar) {Statusbar.styledefault ();}});}). Controller ('actionheetctl', ['$ scope', '$ ionicactionsheet', '$ timeout', function ($ scope, $ ionicactionsheet, $ timeout) {$ scope.show = function () {{{{{{{{{{{) {{{{) {{scope. Teks: '<b> Bagikan </b> this'}, {text: 'move'}], DESTRUCTIVETEXT: 'delete', titleText: 'ubah album Anda', canceltext: 'batal', batal: function () {// batal kode ..}, kancing waktu: function (function) {return true;}; {// batal ..}, ButtonClick: function (index) {return true;}; 2000);};}]) </script> </head> <body ng-app = "starter" ng-controller = "actionheetctl"> <pane-panDi atas adalah pengetahuan yang relevan dari kode instance menu pull-up ionic (Actionheet) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda!