我无法使用 angular material 的 mat-grid-tile 自定义样式属性

Question

我试图在每行中创建 6 个图块，每个图块由左上角的金额、右上角的 + 符号、慈善机构名称下方、最左侧的日期下方等等组成。但一切都在中间。如何为每个 mat-grid-tile 自定义样式。

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;  
}

Answer 1

这里有一个Stackblitz demo。

您可以将 div 放入图块中作为容器元素（以避免弄乱 mat-grid-tile 样式）。在此容器内，您可以使用 flex-box 来构建您想要的布局。每个 tile 的容器 div 可以是这样的：

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

然后，在容器 div 内，您可以有 3 个 section 元素：header（占可用垂直 [=42] 的 20%+ =])、footer（占可用垂直区域的 20% 以上 space）和 body（占任何 space 未被页眉和页脚占用):

.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 */
}

您几乎可以在这里做任何想做的事情。例如，您说您希望在页眉中左侧显示名称，右侧显示符号。所以让我们把头部也变成另一个 flex 容器本身，有两个 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>

我无法使用 angular material 的 mat-grid-tile 自定义样式属性

I am unable to customize the style property with mat-grid-tile of angular material

angular-material

angular

angular5

angular6

angular7

我无法使用 angular material 的 mat-grid-tile 自定义样式 属性

I am unable to customize the style property with mat-grid-tile of angular material

angular-material

angular

angular5

angular6

angular7

我无法使用 angular material 的 mat-grid-tile 自定义样式属性