El menú de pull-up (hoja de acción) permite al usuario seleccionar opciones a través del cuadro que aparece.
Opciones muy peligrosas serán reconocidas en Red Red destacado. Puede hacer que desaparezca haciendo clic en el botón Cancelar o haciendo clic en un espacio en blanco.
Ejemplo
Código HTML
<Body Ng-App = "Starter" Ng-Controller = "ActionSheetCtl"> <ion-pane> <ion-content> <h2 ng-kick = "show ()"> hoja de acción </h2> </ ion-content> </siion-pane> </body>
Código JavaScript
Activar el menú de pull-up en el código requiere el servicio $ ionicactionsheet en su controlador angular:
Angular.module ('Starter', ['ionic']). Run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// oculta la barra de accesorios de forma predeterminada (elimine esto para mostrar la barra de accesorios por encima del teclado // para las entradas de formulario) if (window.cordova && window.cordova.plugins.keyboard) {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). Controller ('ActionSheetCtl', ['$ Scope', '$ IonicactionSheet', '$ 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: 'Cancel',cancel: function () {// Agregar código de cancelación ..}, ButtonClicked: function (index) {return true;}}); $ timeOut (function () {hidesheet ();}, 2000);};El efecto de operación es el siguiente:
Código fuente completo:
<html> <fead> <meta charset = "utf-8"> <meta name = "viewport" content = "inicial-escala = 1, máxima escala = 1, usador-escalable = no, width = dispositivo-width"> <title> </title> <enlace href = "http://cdn.bootcss.com/ionic/1.3.1/css/ion.min.css" rel = "stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.min.js"> </scripts " type = "text/javaScript"> angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatForm.ready (function () {// ocultar la barra de accesorios por defecto (elimine esto para mostrar la barra de accesorios arriba del teclado // para las entradas de formulario) if (window.cordova && window.cordoVa.plEla.pl) {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). Controller ('ActionSheetCtl', ['$ Scope', '$ IonicactionSheet', '$ 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: 'Cancel',cancel: function () {// Agregar código de cancelación ..}, ButtonClicked: function (index) {return true;}}); $ timeOut (function () {hidesheet ();}, 2000);}]) </script> </head> <body ng-app = "starter" ng-confontroller = "actionSheetctl"> <ion-pane> <ion-Content-Content-Content>> <sion-Content-Content >-Content> ng-click = "show ()"> Hoja de acción </h2> </ ion-content> </ ion-pane> </body> </html>Lo anterior es el conocimiento relevante del código de instancia del menú de pull-up iónico (hoja de acción) que le presenta el editor. ¡Espero que te sea útil!