如何在工具栏之间使用 mat-elevation-z？

Question

我正在使用 Angular Material 以下版本： Angular v8.2.8 Material v8.2.1

我正在尝试使用海拔高度，但它没有按预期工作。

例如，当我使用这样的代码时：

<mat-toolbar color="primary" class="mat-elevation-z24 topo">
  <mat-toolbar-row>
    <span>Custom Toolbar 1</span>
  </mat-toolbar-row>
</mat-toolbar>

<mat-toolbar>
  <mat-toolbar-row>
    <span>Custom Toolbar 2</span>
  </mat-toolbar-row>
</mat-toolbar>

我有 2 个工具栏，希望第一个看起来比第二个高。

如果我尝试不使用工具栏或此组件下方的其他组件，它会显示阴影，但当我尝试使用下方的工具栏、sidenav 等时，它无法保持组件为如果他们在同一高度。

我到底应该怎么做才能让它醒来？

Answer 1

mat-elevation-z通过给组件添加box-shadow来工作，但是如果组件和另一个有背景的组件之间没有space，box shadow会被另一个覆盖零件。所以如果你想要显示一个24px的box-shadow，你需要在组件周围至少有24px的space。

<mat-toolbar color="primary" class="mat-elevation-z24 topo" 
    [style.margin-bottom]="'24px'">
  <mat-toolbar-row>
    <span>Custom Toolbar 1</span>
  </mat-toolbar-row>
</mat-toolbar>

<mat-toolbar>
  <mat-toolbar-row>
    <span>Custom Toolbar 2</span>
  </mat-toolbar-row>
</mat-toolbar>

Answer 2

<mat-toolbar class="mat-elevation-z10">
  <mat-toolbar-row>
    <span>Custom Toolbar 2</span>
  </mat-toolbar-row>
</mat-toolbar>

mat-toolbar {
 position: relative;
 top: 0;
 z-index: 10;
}

如何在工具栏之间使用 mat-elevation-z？

How to work with mat-elevation-z with between toolbars?

elevation

angular-material

angular