css - 如何在 Angular Material 中获取此模板？

Question

我正在尝试在我的 Angular 应用程序中获取此模板样式:

----------------------------------------------------
               FIXED HEADER
----------------------------------------------------
  S   |
  I   |
  D   |
  E   |
  N   |           MAIN SCROLLABLE AREA
  A   |
  V   |
      |
      |
      |

在此模板中，标题始终在顶部可见(固定)，主要区域可独立于 sidenav 滚动。

我知道我必须使用哪些 Angular 组件，但我不知道应用哪些 css 样式来获得所需的结果。

我尝试了以下方法:

.fixedHeader {
    position: fixed;
    top: 0;
    z-index: 2;
}

使用此 CSS，我在固定 header 中获得了所需的结果，但其余内容与 header 重叠。如果我将 margin-top 应用到 sidenav 和主要区域，我可以修复这个重叠但玩 margin-top px这似乎不是正确的方法。

应用代码:

在 app.component.html 中我使用了两个自定义组件:

<mt-toolbar></mt-toolbar>
<mt-sidenav></mt-sidenav>

mt-toolbar 组件:

html

<mat-toolbar class="mat-elevation-z4" color="primary" class="fixedHeader">
    TITLE
</mat-toolbar>

CSS

.fixedHeader {
    position: fixed;
    top: 0;
    z-index: 2;
 }

mt-sidenav 组件:

html

<mat-sidenav-container>
    <mat-sidenav mode="side" opened disableClose>
        <mat-nav-list>
          SIDENAV ITEMS
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
         ## MAIN SCROLLABLE AREA ##
    </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

您必须将 mat-toolbar 放在 mat-sidenav-container(或 mat-drawer-container)上方并设置mat-sidenav input fixedInViewport to true + set fixedTopGap当窗口宽度 >= 600px 时为 64px，否则为 56px。

那么类就不是必需的了，它总是在可滚动内容之上，所以它不需要position: fixed;。要使 mat-elevation-z4 正常工作，您需要将其设置为 position: relative; 和 z-index: 1;

为了观察我使用的窗口的宽度 @angular/flex-layout及其 ObservableMedia 服务。例如，您还可以覆盖 mat-toolbars 高度以始终具有 64px 的高度。

这里是 an example我在哪里实现了它。

编辑:这是一个simple example在 stackblitz 上。