O menu pull-up (folha de ação) permite ao usuário selecionar opções através da caixa que aparece.
Opções muito perigosas serão reconhecidas em vermelho destacado. Você pode fazê -lo desaparecer clicando no botão Cancelar ou clicando em um espaço em branco.
Exemplo
Código HTML
<corpo ng-app = "starter" ng-controller = "actionSheetctl"> <ion-pane> <ion-content> <h2 ng-click = "show ()"> folha de ação </h2> </ion-content> </ion-pane> </body>
Código JavaScript
Acionando o menu pull-up no código requer o serviço $ ionicaction sheet em seu controlador angular:
angular.module ('Starter', ['Ionic']). Run (função ($ ionicPlatform) {$ ionicplatform.ready (function () {// Ocultar a barra de acessórios por padrão (remova -a para mostrar a barra de acessórios acima do teclado // para formulário) se (window.cordava && window.cord. {CORDOVA.PLUGINS.KEYBOOLE.HIDEKEYBOOLECESSORYBAR (true);} if (window.statusbar) {statusBar.styledefault ();}});}). , function ($ scope, $ ionicactionheet, $ timeout) {$ scope.show = function () {var hideSheet = $ ionicactionSheet.show ({botões: [{text: '<b> share </b> this'}, {text: 'move'}], destrutivText: 'delete', tits, tit: tit: ' 'Cancelar', Cancelar: function () {// Adicionar código de cancelamento ..}, ButtonClicked: function (index) {return true;}}); $ timeout (function () {hidesheet ();}, 2000);};O efeito de operação é o seguinte:
Código fonte completo:
<html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "scale inicial = 1, escala máxima = 1, user-scalable = não, largura = width"> <title> </title> <link href = "http://cdn.bootcss.com/iionic/1.3.1/css/ionic.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/IONIC/1.3.1/js/ionic.bn.bunm.bootcss.com/iinic/1.3.1/js/ionic.bn type = "text/javascript"> angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// ocultar a barra de acessórios por padrão (remover isso para mostrar a barra acessória acima do keyboard // para formar emputs) se. {CORDOVA.PLUGINS.KEYBOOLE.HIDEKEYBOOLECESSORYBAR (true);} if (window.statusbar) {statusBar.styledefault ();}});}). , function ($ scope, $ ionicactionheet, $ timeout) {$ scope.show = function () {var hideSheet = $ ionicactionSheet.show ({botões: [{text: '<b> share </b> this'}, {text: 'move'}], destrutivText: 'delete', tits, tit: tit: ' 'Cancelar', Cancelar: function () {// Adicionar código de cancelamento ..}, ButtonClicked: function (index) {return true;}}); $ timeout (function () {hidesheet ();}, 2000); > <ion-pane> <ion-content> <h2 ng-click = "show ()"> folha de ação </h2> </ion-content> </ion-pane> </body> </html>O exposto acima é o conhecimento relevante do código da instância do menu de pull-up iônico (folha de ação) introduzido a você pelo editor. Espero que seja útil para você!