Thursday, February 9, 2017

Angular Material - Swipe

Swipe functionality is meant for mobile devices. Following directives are used to handle swipes.
  • md-swipe-down, an Angular directives is used to specify custom behavior when an element is swiped down.
  • md-swipe-left, an Angular directives is used to specify custom behavior when an element is swiped left.
  • md-swipe-right, an Angular directives is used to specify custom behavior when an element is swiped right.
  • md-swipe-up, an Angular directives is used to specify custom behavior when an element is swiped up.

Example

The following example showcases the use of md-swipe-* showcase 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.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)