Angular-material-sidenav
提供：Dev Guides
Angularディレクティブである md-sidenav は、プログラムで表示または非表示にできるコンテナコンポーネントを表示するために使用されます。 デフォルトでは、メインコンテンツ領域の上部にスライドします。
属性
次の表に、 md-sidenav のさまざまな属性のパラメーターと説明を示します。
| Sr.No | Parameter & Description |
|---|---|
| 1 |
md-is-open sidenavが開かれているかどうかにバインドされたモデル。 |
| 2 |
md-component-id $ mdSidenavサービスで使用するcomponentId。 |
| 3 |
md-is-locked-open この式がtrueに評価されると、sidenavは「開いてロック」します。つまり、コンテンツの上に表示されるのではなく、コンテンツのフローに落ちます。 これはis-open属性をオーバーライドします。 $ mdMedia（）サービスはis-locked-open属性に公開され、メディアクエリまたはsm、gt-sm、md、gt-md、lg、gt-lgプリセットのいずれかを指定できます。 例- |
例
次の例は、 md-sidenav の使用法と sidenav コンポーネントの使用法を示しています。
*_am_sidenav_*<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 finddevguides.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>結果
結果を確認します。
