html 演示SideNav组件如何定义/使用Angular Material应用程序。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 演示SideNav组件如何定义/使用Angular Material应用程序。相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Material Test</title>
        <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css"/>
    </head> 
    <body layout="column" ng-app="starterApp">
            
            <md-toolbar layout="row">
                <span>Main App Bar</span>
            </md-toolbar>

            <div layout="row" flex>
                <!-- sideNav is hidden by default; so lock open if space allows -->
                <md-sidenav md-is-locked-open="$media('gt-sm')" class="md-whiteframe-z2">
                  Side Nav
                </md-sidenav>
                <md-content flex>Main Content</md-content>
            </div>
            
	      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>
	      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.min.js"></script>
	      
        <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
        
        <script>
          
          // !! Note: Sidebar will not layout correctly UNLESS the Angular Material app defined/used.
          angular.module('starterApp', ['ngMaterial']);
          
        </script>
    </body>
</html>

以上是关于html 演示SideNav组件如何定义/使用Angular Material应用程序。的主要内容，如果未能解决你的问题，请参考以下文章

Angular Material：使用 mat-sidenav，无法读取未定义的属性“切换”

如何在 Angular 8 和 Angular 材料中单击 sidenav 中的菜单时在侧栏旁边显示我的组件

带有登录和基本 sidenav 的 Angular 材质应用程序

从任何组件动态更改 mat-sidenav 内容

如何使用 Angular Material 让 mat-sidenav-content 占据 100% 的高度

使用工具栏强制 Angular Material sidenav 容器填充高度