0

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

我附上布局以供参考。我在父 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>

4

2 回答 2

2

您可以将 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>

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

于 2021-03-08T06:33:09.340 回答
1

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

<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链接

于 2021-03-08T07:24:17.973 回答