Я не могу настроить свойство стиля с помощью mat-grid-tile из angular материала - PullRequest
Новая
       63

Я не могу настроить свойство стиля с помощью mat-grid-tile из angular материала

0 голосов
/ 01 мая 2020

Я пытаюсь создать 6 плиток в каждой строке, и каждая плитка состоит из суммы в левом верхнем углу, символа + в правом верхнем углу, под названием Charity, затем ниже даты в крайнем левом углу и так далее. Но все идет посередине. Как настроить стиль для каждой плитки-сетки. 

HTML Example

mat-grid-list cols="6" rowHeight="4:3" [gutterSize]="'10px'">
  <mat-grid-tile *ngFor="let item of items; let i=index">
    <div class="div-table">
      <div class="div-row">
        <div class="div-cell" style="font-weight: bold; font-size: medium;">{{amount | currency}}</div>  
      </div>
      <div class="div-row">
        <div>{{item.Name}}</div>
      </div>
    </div>
  </mat-grid-tile>

CSS Example


mat-grid-tile {
  background: lightblue;
}

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
}
.div-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-cell {
  float: left; 
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

1 Ответ

0 голосов
/ 01 мая 2020

Здесь у вас есть Stackblitz demo .

Вы можете поместить div внутри плитки, чтобы она работала в качестве элемента контейнера (чтобы избежать путаницы со стилем mat-grid-tile). Внутри этого контейнера вы можете использовать flex-box для создания вашего макета, как вы хотите. Контейнер div каждой плитки может иметь что-то вроде: 

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

Тогда внутри контейнера div вы можете иметь 3 section элемента: header (принимая 20 % + доступного вертикального пространства), нижний колонтитул (занимающий 20% + доступного вертикального пространства) и body (взятие того пространства, которое не было занято верхним и нижним колонтитулами): 

.container > .header {
  flex-basis: 20%;
  order: 1; /* Assure this is the first element, at the top */
}

.container > .footer {
  flex-basis: 20%;
  order: 3; /* Assure this is the third element, at the bottom */
}

.container > .body {
  flex: 1;
  order: 2; /* Assure this is the second element, in the middle */
}

Вы можете делать здесь практически все, что захотите. Например, вы сказали, что хотите иметь в заголовке имя слева и символ справа. Итак, давайте превратим заголовок также в другой гибкий контейнер с двумя элементами section: header-start и header-end (на всякий случай, если вам нужны разные стили CSS): 

.header {
  display: flex;
  justify-content: space-between;
  flex-basis: 20%;
  order: 1;
}

Общий html будет выглядеть так: 

<mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile *ngFor="let i of [1,2,3,4]">
        <div class="container">
            <section class="header">
                <section class="header-start>
                    Charity name
                </section>
                <section class="header-end">
                    <mat-icon>home</mat-icon>
                </section>
            </section>

            <section class="footer">
                footer
            </section>

            <section class="body">
                body
            </section>
        </div>
    </mat-grid-tile>
</mat-grid-list>
...