ionic ActionSheet

Das ActionSheet ermöglicht es Benutzern, Optionen über ein von unten aufpoppendes Feld auszuwählen.

Sehr gefährliche Optionen sind in leuchtendem Rot hervorgehoben, sodass Benutzer sie auf einen Blick erkennen können. Sie können es schließen, indem Sie auf die Abbrechen-Schaltfläche tippen oder auf den leeren Bereich tippen.

Beispiel

HTML-Code

<body ng-app="starter" ng-controller="actionsheetCtl" >

    <ion-pane>
        <ion-content >
            <h2 ng-click="show()">Action Sheet</h2>
        </ion-content>
    </ion-pane>
</body>

JavaScript-Code

Um das ActionSheet in Ihrem Code auszulösen, müssen Sie den Dienst $ionicActionSheet in Ihrem Angular-Controller verwenden:

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $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( '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() {
                 // add cancel code..
               },
            buttonClicked: function(index) {
              return true;
            }
        });

        $timeout(function() {
            hideSheet();
        }, 2000);

    };  
}])

Das Ergebnis sieht wie folgt aus: