Angular Material - SideNav

Angular Material - SideNav - 从简单和简单的步骤学习角度材料从基本概念到高级概念，包括概述，环境设置，自动完成，底部工作表，按钮，卡片，复选框，芯片，联系芯片，内容，DatePicker，对话框，分频器， Fab Speed Dial，Fab工具栏，网格，图标，输入，布局，列表，菜单，菜单栏，进度条，单选按钮，选择，SideNav，滑块，Subheaders，刷卡，开关，标签，主题，Toast，工具栏，工具提示，排版，虚拟重复，WhiteFrame。

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

属性

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

Sr.No	参数&说明
1	md-is-open 绑定sidenav是否被打开的模型.
2	md-component-id componentId与$ mdSidenav服务一起使用.
3	md-is-locked-open 当此表达式评估为true时，sidenav'锁定打开':它落入内容的流程而不是出现在它上面.这会覆盖is-open属性. $ mdMedia()服务暴露给is-locked-open属性，该属性可以是媒体查询或sm，gt-sm，md，gt-md，lg或gt-lg预设之一. 示例 : < md-sidenav md-is-locked- open ="shouldLockOpen"> < md-sidenav md-is-locked-open ="$ mdMedia('min-width:1000px')"> < md-sidenav md-is-locked-open ="$ mdMedia('sm')"> <！ - (锁定在小屏幕上打开) - >

Sr.No

参数&说明

md-is-open

绑定sidenav是否被打开的模型.

md-component-id

componentId与$ mdSidenav服务一起使用.

md-is-locked-open

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

示例 :

< md-sidenav md-is-locked- open ="shouldLockOpen"> < md-sidenav md-is-locked-open ="$ mdMedia('min-width:1000px')"> < md-sidenav md-is-locked-open ="$ mdMedia('sm')"> <！ - (锁定在小屏幕上打开) - >

示例

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

am_sidenav.htm

                                                                  angular            .module('firstApplication', ['ngMaterial'])            .controller('sideNavController', sideNavController);         function sideNavController ($scope, $mdSidenav) {            $scope.openLeftMenu = function() {               $mdSidenav('left').toggle();            };                         $scope.openRightMenu = function() {               $mdSidenav('right').toggle();            };         }                                                   Welcome to TutorialsPoint.Com                                         Open Left Menu            Open Right Menu                                       Google

结果

验证结果.