English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Swipe
  • 时间：2025-02-05

Angular Material - Swipe

Previous Page Next Page  

The Swipe functionapty 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>
      <pnk rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
      <pnk 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( firstApppcation , [ 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 = "firstApppcation"> 
      <md-card>
         <span id = "swipeContainer" ng-controller = "swipeController as ctrl"
            layout = "row" ng-cloak>
            <span flex>
               <span 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>
               </span>
               
               <md-spanider></md-spanider>
               <span class = "demo-swipe" md-swipe-right = "onSwipeRight()">
                  <span class = "no-select">Swipe me to the right</span>
               </span>
            </span>

            <md-spanider></md-spanider>
            <span flex layout = "row">
               <span flex layout = "row" layout-apgn = "center center"
                  class = "demo-swipe" md-swipe-up = "onSwipeUp()">
                  <span class = "no-select">Swipe me up</span>
               </span>
               
               <md-spanider></md-spanider>
               <span flex layout = "row" layout-apgn = "center center"
                  class = "demo-swipe" md-swipe-down = "onSwipeDown()">
                  <span class = "no-select">Swipe me down</span>
               </span>
            </span>
            
         </span>
      </md-card>
   </body>
</html>

Result

Verify the result.