Swipe functionality is meant for mobile devices. Following directives are used to handle swipes.
am_swipes.htm
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 ofmd-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>
No comments:
Post a Comment