SideNav（SideNav）

优质

小牛编辑

127浏览

2023-12-01

md-sidenav ，Angular指令用于显示可以以编程方式显示或隐藏的容器组件。默认情况下，它会滑过主内容区域的顶部。

属性 (Attributes)

下表列出了md-sidenav的不同属性的参数和描述

Sr.No 参数和描述

Sr.No	参数和描述
1	md-is-open 是否打开sidenav的模型。
2	md-component-id componentId与$ mdSidenav服务一起使用。
3	md-is-locked-open 当这个表达式评估为真时，sidenav'锁定打开':它落入内容的流程而不是出现在它上面。这会覆盖is-open属性。 $ mdMedia（）服务暴露给is-locked-open属性，该属性可以是媒体查询或sm，gt-sm，md，gt-md，lg或gt-lg预设之一。 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)-->`

md-is-open

是否打开sidenav的模型。

md-component-id

componentId与$ mdSidenav服务一起使用。

md-is-locked-open

当这个表达式评估为真时，sidenav'锁定打开':它落入内容的流程而不是出现在它上面。这会覆盖is-open属性。 $ mdMedia（）服务暴露给is-locked-open属性，该属性可以是媒体查询或sm，gt-sm，md，gt-md，lg或gt-lg预设之一。

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)

以下示例显示了md-sidenav的使用以及sidenav组件的sidenav 。

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 xnip.cn</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>