如何在角度材质设计中将工具栏下方的侧面导航设置为?所以sidenav不会超过工具栏..
答案 0 :(得分:0)
这是一个布局问题。只需使用此页面结构:
<div id="main" class="layout-row">
<div id="content" class="layout-column flex">
<md-toolbar>
YOUR TITLE HERE
</md-toolbar>
<md-content>
YOUR CONTENTS HERE
<md-content>
</div>
<md-sidenav class="md-sidenav-left" md-component-id="myPanel">
THE SIDENAV CONTENT
<md-sidenav>
</div>
就是这样!
答案 1 :(得分:0)
你走了。这就是你想要的,以防它可以帮助某人
<body ng-app="" layout="column">
<md-toolbar>
</md-toolbar>
<md-content flex>
<md-sidenav>
</md-sidenav>
<ui-view></ui-view>
</md-content>
</body
答案 2 :(得分:0)
<mat-drawer-container class="example-container">
<mat-toolbar class="example-header" class="fixed-header" color="primary" >
<mat-toolbar-row>
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon" *ngIf="drawer.opened"><span><i class="fa fa-close"></i></span></mat-icon>
<mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened"><span><i class="fa fa-th-large"></i></span></mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-drawer #drawer class="example-sidenav" mode="side" opened >
<mat-nav-list>
<a mat-list-item href="#"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
<a mat-list-item href="#"><i class="fa fa-desktop"></i><span class="nav-label">Branches</span></a>
</mat-nav-list>
</mat-drawer>
<div class="example-sidenav-content">
<router-outlet></router-outlet>
</div>
<mat-toolbar class="example-footer">Footer</mat-toolbar>
</mat-drawer-container>