问题描述
我正在尝试在带有Angular Material的Angular中使用经典的Header,Footer和Sidebar导航。 但是,设置高度时出现问题,导致视口中出现多个滚动问题。
我附上了布局以供参考。 我在父sidenav的sidenav内容中使用了内部sidenav。
: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>
解决方法
您可以使用 mat-toolbar 作为页眉和页脚。 mat-sidenav-container 用于显示 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-sidenav-container:
<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>
这是基本的页面布局。您可以添加样式和图标,根据需要更改颜色。
,在您的根模块或您正在处理的模块中导入所有材料模块,然后像下面那样实现它,
<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>
对于完整的实现,请遵循此 stackblitz link
,对于我的网站,我使用条纹。这是一种非常流行的付款解决方案,并且有非常好的开发人员指南。在这里您可以找到文档: https://stripe.com/docs
尽管它有一个很棒的社区。如果您将Firebase用作后端,则可以直接使用插件安装它,而不必自己实现。