Angular Material BottomSheet
home
Run
screen_rotation
fullscreen
cloud_download
<html lang="en" > <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <script type="text/javascript"> angular.module('myApp', ['ngMaterial']) .controller('myCtr', function($scope, $timeout, $mdBottomSheet, $mdToast) { $scope.alert = ''; $scope.showBottomSheet = function() { $scope.alert = ''; $mdBottomSheet.show({ templateUrl: 'bottom-sheet-template.html' }); }; }); </script> </head> <body ng-app="myApp" ng-cloak> <div ng-controller="myCtr" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp"> <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center"> <md-button flex="50" class="md-primary md-raised" ng-click="showBottomSheet()">Show BottomSheet</md-button> </div> <script type="text/ng-template" id="bottom-sheet-template.html"> <md-bottom-sheet class="md-list"> <h3>Select Actions</h3> <ul> <li>1. <a href="#"><b>Add</b></a></li> <li>2. <a href="#"><b>Edit</b></a></li> <li>3. <a href="#"><b>Delete</b></a></li> </ul> </md-bottom-sheet> </script> </div> </div> </body> </html>
<html lang="en" > <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <script type="text/javascript"> angular.module('myApp', ['ngMaterial']) .controller('myCtr', function($scope, $timeout, $mdBottomSheet, $mdToast) { $scope.alert = ''; $scope.showBottomSheet = function() { $scope.alert = ''; $mdBottomSheet.show({ templateUrl: 'bottom-sheet-template.html' }); }; }); </script> </head> <body ng-app="myApp" ng-cloak> <div ng-controller="myCtr" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp"> <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center"> <md-button flex="50" class="md-primary md-raised" ng-click="showBottomSheet()">Show BottomSheet</md-button> </div> <script type="text/ng-template" id="bottom-sheet-template.html"> <md-bottom-sheet class="md-list"> <h3>Select Actions</h3> <ul> <li>1. <a href="#"><b>Add</b></a></li> <li>2. <a href="#"><b>Edit</b></a></li> <li>3. <a href="#"><b>Delete</b></a></li> </ul> </md-bottom-sheet> </script> </div> </div> </body> </html>
Copyrights@tutorialsplane.com