”;
The Swipe functionality is meant for mobile devices. The following directives are used to handle swipes.
-
md-swipe-down, an Angular directive is used to specify custom behavior when an element is swiped down.
-
md-swipe-left, an Angular directive is used to specify custom behavior when an element is swiped left.
-
md-swipe-right, an Angular directive is used to specify custom behavior when an element is swiped right.
-
md-swipe-up, an Angular directive is used to specify custom behavior when an element is swiped up.
Example
The following example shows the use of md-swipe-* and also the uses of swipe components.
am_swipes.htm
<html lang = "en"> <head> <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <style> .swipeContainer .demo-swipe { padding: 20px 10px; } .swipeContainer .no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> <script language = "javascript"> angular .module(''firstApplication'', [''ngMaterial'']) .controller(''swipeController'', swipeController); function swipeController ($scope) { $scope.onSwipeLeft = function(ev) { alert(''Swiped Left!''); }; $scope.onSwipeRight = function(ev) { alert(''Swiped Right!''); }; $scope.onSwipeUp = function(ev) { alert(''Swiped Up!''); }; $scope.onSwipeDown = function(ev) { alert(''Swiped Down!''); }; } </script> </head> <body ng-app = "firstApplication"> <md-card> <div id = "swipeContainer" ng-controller = "swipeController as ctrl" layout = "row" ng-cloak> <div flex> <div class = "demo-swipe" md-swipe-left = "onSwipeLeft()"> <span class = "no-select">Swipe me to the left</span> <md-icon md-font-icon = "android" aria-label = "android"></md-icon> </div> <md-divider></md-divider> <div class = "demo-swipe" md-swipe-right = "onSwipeRight()"> <span class = "no-select">Swipe me to the right</span> </div> </div> <md-divider></md-divider> <div flex layout = "row"> <div flex layout = "row" layout-align = "center center" class = "demo-swipe" md-swipe-up = "onSwipeUp()"> <span class = "no-select">Swipe me up</span> </div> <md-divider></md-divider> <div flex layout = "row" layout-align = "center center" class = "demo-swipe" md-swipe-down = "onSwipeDown()"> <span class = "no-select">Swipe me down</span> </div> </div> </div> </md-card> </body> </html>
Result
Verify the result.
Advertisements
”;