The
am_sidenav.htm
md-sidenav, an Angular directives is used to show a
container component which can be shown or hide programmatically. It
slides out over the top of the main content region by default.Attributes
| S.N. | Parameter & Description |
|---|---|
| 1 | md-is-open A model bound to whether the sidenav is opened. |
| 2 | md-component-id componentId to use with $mdSidenav service. |
| 3 | md-is-locked-open When this expression evalutes to true, the sidenav 'locks open': it falls into the content's flow instead of appearing over it. This overrides the is-open attribute. The $mdMedia() service is exposed to the is-locked-open attribute, which can be given a media query or one of the sm, gt-sm, md, gt-md, lg or gt-lg presets. Examples:
|
Example
The following example showcases the use ofmd-sidenav showcase uses of sidenav component.am_sidenav.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"> <script language="javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('sideNavController', sideNavController); function sideNavController ($scope, $mdSidenav) { $scope.openLeftMenu = function() { $mdSidenav('left').toggle(); }; $scope.openRightMenu = function() { $mdSidenav('right').toggle(); }; } </script> </head> <body ng-app="firstApplication"> <div id="sideNavContainer" ng-controller="sideNavController as ctrl" layout="row" ng-cloak> <md-sidenav md-component-id="left" class="md-sidenav-left">Welcome to TutorialsPoint.Com</md-sidenav> <md-content> <md-button ng-click="openLeftMenu()">Open Left Menu</md-button> <md-button ng-click="openRightMenu()">Open Right Menu</md-button> </md-content> <md-sidenav md-component-id="right" class="md-sidenav-right"> <md-button href="http://google.com">Google</md-button> </md-sidenav> </div> </body> </html>
No comments:
Post a Comment