本記事でできること
環境
$ npm -v
7.21.1
$ node -v
16.9.1
環境構築はこちら
第1回 Angular Material 徹底解説！- 環境構築
キジ(@kiji)です｡みなさんは､Webアプリケーション開発のときにどのフレームワークを使っていますか?React､Vue､最近ではFlutterも候補にあがるでしょうか｡ 私はというと､ずっとAngularを使ってきました｡Angula
www.libetech.info
説明
mat-cardタグで､最もシンプルなカードを作ることができます｡このタグの中に､以下のタグを埋め込むことできれいに装飾することができます｡
また､mat-card-card-title-groupを使うことで､横長のレイアウトにすることもできる｡
| タグ | 説明 |
|---|---|
| mat-card-title | タイトル｡header内に記述する |
| mat-card-subtitle | サブタイトル｡header内に記述する |
| mat-card-header | avatarやtitleなどのレイアウトを調整する |
| mat-card-content | 説明文のレイアウトを調整する |
| mat-card-actions | ボタン群のレイアウトを調整する |
| mat-card-footer | フッターのレイアウトを調整する |
| mat-card-card-title-group | ニュースフィードのような横長のレイアウトに調整する |
ソースコード
GitHubはこちら
GitHub - kiji-tech/blog-angular-material
Contribute to kiji-tech/blog-angular-material development by creating an account on GitHub.
github.com
コメント