Angular Material GridList（10分で作成）

グリッドの使用法

今回変更するファイルは、
cmaterial.module.ts
app.component.html
app.component.css
です。
app.component.tsは変更しません。

始めにcmaterial.module.tsから、
説明していきます。
追加するのは、
MatGridListModuleです。
コードは以下になります。

import { NgModule } from "@angular/core";
//追加
import {MatGridListModule} from '@angular/material/grid-list';

@NgModule({
 exports:[ 
          MatGridListModule                 
         ]
})
export class CmaterialModule{}

次は、app.component.htmlです。
mat-grid-listの中に、mat-grid-tileを入れます。
mat-grid-listでは、colsとして3を設定しています。
colsはグリッドタイルの横並びの数になります。
rowHeightは3：1を設定しています。
横幅は３に対し、縦幅は１になります。
画像で分かるように、
下段に２つ空が出来る事になります。

mat-grid-tileの設定は、
順に、
cmaterial.module.ts
app.component.ts
app.component.html
app.component.css
が入っています。
今回のプログラミングに関係しているファイルを入れています。

<mat-grid-list cols="3" rowHeight="3:1">
  <mat-grid-tile>cmaterial.module.ts</mat-grid-tile>
  <mat-grid-tile>app.component.ts</mat-grid-tile>
  <mat-grid-tile>app.component.html</mat-grid-tile>
  <mat-grid-tile>app.component.css</mat-grid-tile>
</mat-grid-list>

次は、app.component.cssです。
横幅の最大は400pxに設定しています。
グリッドタイルの色は、
バックグラウンドですが、
rgb(134, 134, 179)に設定しました。

mat-grid-list{
  max-width: 400px;  
}

mat-grid-tile {
  
  background: rgb(134, 134, 179);
}

今回は以上です。