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 容器填充高度