Как работать с mat-elevation-z между панелями инструментов? - PullRequest
Новая
       9

Как работать с mat-elevation-z между панелями инструментов?

0 голосов
/ 03 октября 2019

Я использую 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 и т. д. - не получается держать компоненты, как если бы они были на одной высоте.

Что именно я должен сделать, чтобы он проснулся?

1 Ответ

0 голосов
/ 03 октября 2019

mat-elevation-z работает путем добавления тени блока к компоненту, но если между компонентом и другим компонентом, имеющим фон, нет места, тень блока будет закрыта другим компонентом. Поэтому, если вы хотите, чтобы отображалась тень в 24 пикселя, вам нужно как минимум 24 пикселя вокруг компонента. 

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