本記事でできること
環境
$ npm -v
7.21.1
$ node -v
16.9.1
環境構築はこちら
第1回 Angular Material 徹底解説！- 環境構築
キジ(@kiji)です｡みなさんは､Webアプリケーション開発のときにどのフレームワークを使っていますか?React､Vue､最近ではFlutterも候補にあがるでしょうか｡ 私はというと､ずっとAngularを使ってきました｡Angula
www.libetech.info
説明
| タグ | 説明 |
|---|---|
| mat-tab | タブの要素｡中に記載したコンテンツを表示する｡ |
| mat-tab-group | mat-tabをまとめる｡form-groupのような役割｡ |
| mat-tab-nav | ナビゲーションバーとして使う際のタグ｡ |
| mat-tab-link | mat-tab-navに内包されるタグ｡ |
Angular Materialのタブは､mat-tabとmat-tab-navの2種類あります｡
mat-tabはページ内で表示を切り替えたいときに､mat-tab-navはSPAなどでページを切り替えたいときに使うとよいです｡
専用パラメータ
| タグ | パラメータ名 | 型 | 説明 |
|---|---|---|---|
| mat-tab-group | color | ThemePalette | タブの選択色｡ |
| mat-tab-group | backgroundColor | ThemePalette | タブの背景色｡ |
| mat-tab | label | string | タブに表示するラベル｡ |
| mat-tab | disabled | boolean | タブの活性／非活性の状態｡ |
| mat-tab-nav | color | ThemePalette | タブの選択色｡ |
| mat-tab-nav | backgroundColor | ThemePalette | タブの背景色｡ |
| mat-tab-link | active | boolean | タブの選択状態｡ |
| mat-tab-link | disable | boolean | タブの活性／非活性の状態｡ |
ソースコード
GitHubはこちら
GitHub - kiji-tech/blog-angular-material
Contribute to kiji-tech/blog-angular-material development by creating an account on GitHub.
github.com
コメント