如何在角度材质中实现 Sidenav、页眉和页脚？

Question

我正在尝试使用一个经典的Header，Footer&"带角度材质的角度"中的边栏导航。但是，我遇到了设置高度的问题，导致视口中出现多个滚动问题。

我附上布局以供参考。我在父侧导航的侧导航内容中使用内部侧导航。

:host {
display: flex;
flex-direction: column;
height: 100%;
}
.mat-elevation-z6 {
z-index: 9;
}
.mtsMainContainer {
height: 100%;
.mtsMainNav {
box-shadow: 1px 1px 10px 1px lightgray;
}
.mtsMainContent {
height: 100%;
.mtsSubContainer {
height: 100%;
.mtsSubNav {
width: 300px;
.dvSubNavHeader {
position: sticky;
top: 0;
z-index: 1;
background: white;
padding: 20px;

.dvCloseSubNav {
background: #f2f2f2;
padding: 5px;

span {
cursor: pointer;
vertical-align: middle;
}
}
}
}
.mtsSubContent {
padding: 20px;
}
}
}
}

<app-header class="mat-elevation-z6"></app-header>
<mat-sidenav-container class="mtsMainContainer">
<mat-sidenav class="mtsMainNav" #sidenav mode="side" opened>
<app-sidenav-contents></app-sidenav-contents>
</mat-sidenav>
<mat-sidenav-content class="mtsMainContent">
<mat-sidenav-container class="mtsSubContainer">
<mat-sidenav class="mtsSubNav" #subnav mode="side">
<div class="dvSubNavHeader">
<div class="dvCloseSubNav">
<span (click)="subnav.toggle()">
<mat-icon style="vertical-align: middle;">keyboard_arrow_left</mat-icon>
<b>{{transactionHeader || 'Transactions'}}</b>
</span>
</div>
</div>
<app-transactions-bar></app-transactions-bar>
</mat-sidenav>
<mat-sidenav-content class="mtsSubContent">
<app-bread-crumb></app-bread-crumb>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
</mat-sidenav-content>
</mat-sidenav-container>
<app-scroll-top></app-scroll-top>
<app-footer></app-footer>

Answer 1

您可以使用页眉和页脚的mat工具栏。mat sidenav容器以显示sidenav和内容。

对于标题：

<mat-toolbar color="primary">
<mat-toolbar-row>
<img src=""> <!-- Add your logo if available-->
<mat-icon (click)="sidenav.toggle()">menu</mat-icon>
</mat-toolbar-row>
</mat-toolbar>

对于sideNav，使用mat-sidnav容器：

<mat-sidenav-container>
<!-- This is your sidenav -->
<mat-sidenav style="width: 15%" #sidenav [opened]="true" [mode]="'side'"> 
<mat-nav-list>
<a mat-list-item [routerLink]="'/provideLink'" routerLinkActive="active-list-item">
Nav1
</a>
<a mat-list-item [routerLink]="'/provideLink'" routerLinkActive="active-list-item">
Nav2
</a>
</mat-nav-list>
</mat-sidenav>
<!-- Content or body of your page-->
<mat-sidenav-content>
<div style="height: 90vh">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

对于页脚，添加另一个垫子工具栏：

<mat-toolbar color="primary">
<mat-toolbar-row></mat-toolbar-row>
</mat-toolbar>

这是基本的页面布局。您可以添加样式&图标，根据需要更改颜色。

Answer 2

导入根模块或正在处理的模块中的所有材料模块，然后像下面这样实现它，

<mat-sidenav-container fullscreen>
<mat-sidenav #sidenav class="sw-sidenav">
<mat-list>
<mat-list-item [routerLink]="['/']"> Foo</mat-list-item>
<mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item>
</mat-list>
</mat-sidenav>
<mat-toolbar color="primary" #toolbar>
<button
type="button"
mat-icon-button
(click)="sidenav.open()"
title="Open sidenav">
<mat-icon>menu</mat-icon>
</button>
This is my Toolbar
</mat-toolbar>
<div class="content" #main>
<router-outlet></router-outlet>
</div>
<div class="footer" #footer>
Your sticky footer with a variable height.
</div>


</mat-sidenav-container>

对于完整的实现，请遵循此堆叠litz链接