Angular Material – Swipe

Angular Material Swipe function is an angular directive used for mobile devices. The UX pattern is used for mobile devices only, and cannot make the responsive sites. To initiate a swipe gesture on a desktop, you can click, hold and drag in right, left, up or down with the help of swipe function.

The below instructions are used to handle swipe.

md-swipe-down: It is used to determine the custom behavior when any element is swiped down.
md-swipe-up: It is used to generate custom behavior when an element is swiped up.
md-swipe-left: md-swipe-left is an angular directive that is used to specify custom behavior when an element is left swiped.
md-swipe-right: It specifies custom behavior when an element is swiped right.

Example 1:

The example shows the use of md-swipe- * and uses the swipe components.

am_swipes.html

  <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>  

Output:

Angular Material Swipe

Example 2:

app.component.html

  </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>  

app.component.ts

  angular.module(‘demoSwipe’, [‘ngMaterial’]) .controller(‘demoSwipeCtrl’, function($scope) { $scope.onSwipeLeft = function(ev)   { alert(‘You swiped left!!’); };   $scope.onSwipeRight = function(ev)   { alert(‘You swiped right!!’); };   $scope.onSwipeUp = function(ev)   { alert(‘You swiped up!!’); };   $scope.onSwipeDown = function(ev)   { alert(‘You swiped down!!’);   };   });  

app.component.css

  .swipedemoBasicUsage   .demo-swipe { padding: 20px 10px; }   .swipedemoBasicUsage   .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; }  

Output:

Angular Material Swipe

Next TopicAngular Material Toasts/ Whiteframe

angular angular 8 angular material angular material features angular material tutorial angularjs angularjs vs angular css html javascript what is angular material

Angular Material Swipe

Angular Material – Swipe

Example 1:

Example 2:

Angular Material Fab-Toolbar

AutoCAD Student’s Version 2020 Download

You may also like