угловой материал мат-сетка-высота плитки - PullRequest
Новая
       8

угловой материал мат-сетка-высота плитки

0 голосов
/ 05 октября 2018
  • Angular 6+
  • Angular Material 6+

Я хочу, чтобы один mat-grid-tile имел меньшую высоту по сравнению с другими плитками.Попытка сделать это, установив [rowspan]=".3" свойство.Это делает плитку и ее высоту содержимого меньше, но пространство между этой «меньшей» плиткой и следующей остается такой же, как если бы у плитки было [rowspan]="1".установка [rowspan]=".7" следующей плитки не исправляет ее - они по-прежнему имеют одинаковое пространство строки полной высоты. 

  <mat-grid-list [cols]="6" rowHeight="16rem">
    <mat-grid-tile [colspan]="2" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="4" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]=".3">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list> 

.dashboard-card {
  width: calc(100% - 60px);
  height: calc(100% - 60px);
}

Как правильно сделать это / как решить проблему, описанную выше?

1 Ответ

0 голосов
/ 05 октября 2018

Решается путем разбиения строк на более мелкие.Увеличивая [rowspan] и уменьшая rowHeight.

т.е.: 

  <mat-grid-list [cols]="6" rowHeight="4rem">
    <mat-grid-tile [colspan]="2" [rowspan]="4">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="4">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
...