Question

我正在尝试在带有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>

Answer 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>

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

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>

对于完整的实现，请遵循此 stackblitz link

Answer 3

对于我的网站，我使用条纹。这是一种非常流行的付款解决方案，并且有非常好的开发人员指南。在这里您可以找到文档： https://stripe.com/docs

尽管它有一个很棒的社区。如果您将Firebase用作后端，则可以直接使用插件安装它，而不必自己实现。

如何用角形材料实现Sidenav，页眉和页脚？

3 个答案: