Angular Material Card（15分で作成）

カードの使用法

Angular Material Cardは、
テキスト、写真、およびアクションの
コンテンツコンテナです。
mat-card要素内では、以下のセクション等が使用できます。
mat-card-header、
mat-card-content、
img mat-card-image、
mat-card-actions、
mat-card-footer、

また、mat-card-headerセクションには、
mat-card-title、
mat-card-subtitle 、
等のリッチヘッダーが入ります。

今回は使用していませんが、
mat-card-title-groupには、
タイトル、サブタイトル、画像を1つのセクションに
まとめるために使用できます。

変更するファイルは、
cmaterial.module.tsと、
app.component.htmlと、
app.componet.cssです。

cmaterial.module.tsファイルは、
MatCardModuleを追加インポートします。
下記がコードになります。


  
import { NgModule } from "@angular/core";
//追加
import { MatCardModule } from '@angular/material/card';

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

次はapp.component.htmlです。
assetsフォルダーに、
kadann02.jpg画像を収納しています。
assetsフォルダーには他に、
kadann01.jpg画像もありますが、
app.component.cssから使用しています。
画像の呼び出しは、小文字 *. jpgです。
写真を使うとき、
サフィックスが*. JPGと大文字になっていることもあるので、
その時は修正が必要です。

mat-card内に、
mat-card-header、
img mat-card-image、
mat-card-content、
mat-card-actionsが入ります。

mat-card-actions内では、
button mat-buttonを使っています。

下記がコードになります。


  
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>花壇</mat-card-title>
      <mat-card-subtitle>花</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="/assets/kadann02.jpg" alt="Photo of flower">    
    <mat-card-content>
      <p>
      ご近所の花壇の写真。<br/>
      見事に咲き誇っています。<br/>
      2020年7月11日　撮影<br/>        
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>

  <!--
"/assets/kadann02.jpg"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
/assets/kadan01.jpg
  -->

次はapp.component.cssです。
.example-cardにより、
mat-cardの横幅を最大400pxにします。

.example-header-imageは、
mat-card-avatarの、
アバターの外観を生成します。

下記がコードになります。


  
 .example-card {
    max-width: 400px;
  }
  
  .example-header-image {
    background-image: url(/assets/kadann01.jpg );
    background-size: cover;
  }

今回は以上です。