”;
The md-sidenav, an Angular directive 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
The following table lists out the parameters and description of the different attributes of md-sidenav
| Sr.No | 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 −
<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav>
<md-sidenav md-is-locked-open = "$mdMedia(''min-width: 1000px'')"></mdsidenav>
<md-sidenav md-is-locked-open = "$mdMedia(''sm'')"></md-sidenav> <!--(locks open on small screens)-->
|
Example
The following example shows the use of md-sidenav and also the uses of the 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>
Result
Verify the result.
”;