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

Posted 2023-02-18

【中文标题】如何在角度材料中实现 Sidenav、页眉和页脚？

【英文标题】：How to implement Sidenav, Header & Footer in angular material?

【发布时间】：2021-01-17 19:54:22

【问题描述】：

我正在尝试在 Angular 中使用经典的页眉、页脚和侧边栏导航和 Angular Material。 但是，我在设置高度时遇到问题，导致视口中出现多个滚动问题。

我附上布局以供参考。 我在父 sidenav 的 sidenav-content 中使用内部 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>

【参考方案1】：

您可以使用 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>

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

【参考方案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>

如需完整实施，请关注此 stackblitz link