Le menu pull-up (ActionSheet) permet à l'utilisateur de sélectionner des options via la case qui apparaît.
Des options très dangereuses seront reconnues dans le rouge en surbrillance. Vous pouvez le faire disparaître en cliquant sur le bouton Annuler ou en cliquant sur un espace vide.
Exemple
Code html
<body ng-app = "starter" ng-contrôleur = "ActionSheetCTl"> <ion-Pane> <ion-content> <h2 ng-Click = "show ()"> Fiche d'action </h2> </ion-contente> </ion-puane> </body>
Code javascript
Le déclenchement du menu Pull-up dans le code nécessite le service de feuille de $ ionicAction dans votre contrôleur angulaire:
angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// masquer la barre accessoire par défaut (supprimer ceci pour afficher la barre accessoire au-dessus du clavier // pour les entrées de formulaire) if (window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). Controller ('ActionSheetCTl', ['$ scope', '$ ionicactionSheet', '$ timeout' , Fonction ($ scope, $ ionicActionSheet, $ timeout) {$ scope.show = function () {var hideSheet = $ ionicActionSheet.show ({Text: 'Move'}], destructiveTex function () {// Ajouter du code d'annulation ..}, ButtonClicked: function (index) {return true;}}); $ timeout (function () {hideSheet ();}, 2000);};}]))L'effet de fonctionnement est le suivant:
Code source complet:
<html> <éad- head> <meta charset = "utf-8"> <meta name = "Viewport" contenu = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width"> <ititle> </ title> <lien href = "http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.js"> </ script> type = "text / javascript"> angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// masquer la barre accessoire par défaut (supprimer ceci pour afficher la barre accessoire au-dessus du clavier // pour les entrées de formulaire) if (fenêtre. {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). Controller ('ActionSheetCTl', ['$ scope', '$ ionicactionSheet', '$ timeout' , Fonction ($ scope, $ ionicActionSheet, $ timeout) {$ scope.show = function () {var hideSheet = $ ionicActionSheet.show ({Text: 'Move'}], destructiveTex function () {// Ajouter du code d'annulation ..}, ButtonClicked: function (index) {return true;}}); $ timeout (function () {hideSheet ();}, 2000);};}]) </dcript> </-head> <corps ng-app = "start ng-Click = "show ()"> Fiche d'action </h2> </ ion-content> </ion-Pane> </ody> </html>Ce qui précède est la connaissance pertinente du code d'instance de mise à traction ionique (ActionSheet) qui vous est présenté par l'éditeur. J'espère que cela vous sera utile!