web-dev-qa-db-ja.com

マットテーブルセルを色で塗りつぶす

次のように、mat-tableにはかなり基本的な列があります。

<mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="zone">
        <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let item" [style.background-color]="'#' + item.zone.color"></mat-cell>
    </ng-container>

    ...

</mat-table>

zone列のセルに、行ごとに変化するいくつかの色を指定します（行全体ではなく、この特定の列のセルのみ）。

これまでに見つけたのは、行全体を着色することだけです。

zone列のセルは、次のHTMLにレンダリングされます。

<mat-cell class="mat-cell cdk-column-zone mat-column-zone" role="gridcell" style="background-color: rgb(255, 182, 193);" _ngcontent-c8=""></mat-cell>

background-colorスタイルプロパティが正しく適用されていることがわかりますが、セルにはコンテンツがないため、セルの高さが0であることが問題です。セル内に&nbsp;を挿入しようとしましたが、上下にマージンのある細いバーとして表示されます。

enter image description here

そして、私が欲しいのは、マージンを含むセル全体を着色することです。

mat-tableの個々のセルに色を付けるにはどうすればよいですか？

htmlcssangularangular-material
6
Alexander Abakumov

Angular Material によって提供されるデフォルトのCSSを見ると、mat-row要素の最小の高さが48px。

mat-row height

しかし、mat-cellを見ると、最小値もデフォルトの高さも設定されていないことがわかります。これは、中央にとどまるために親要素（行）の表示/配置プロパティに依存しています。

mat-cell height

前の画像を見ると、コードの背景色プロパティによって色付けされている領域が正確に示されています。

したがって、セル全体の背景色を変更するためのオプションの1つは、行がセルに使用するのと同じ最小の高さをセルに設定することです。これは、次のCSS宣言を使用して実行できます。

.mat-cell, .mat-header-cell {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
}

次に、背景色のプロパティを使用して色を変更します。

6
Romulo