今回もAngular Materialについてみていきましょう!
Webアプリによくあるヘッダーですが、皆さんは実装の仕方はご存知でしょうか?
CSSで実装したり、Bootstrapで実装しても良いのですが、実はAngular Materialに便利なコンポーネントがあるんです!
それを使えば初心者でも簡単にヘッダーを実装することができますよ。
そんなわけで、今回はAngular Materialでヘッダーを実装する方法についてご紹介しますね。
本記事の環境は以下の通りです。
- Angular CDK:8.2.3
- Angular CLI:8.3.20
- Angular Material:8.2.3
スポンサーリンク
Contents
Angular Materialのヘッダーを実装する手順
Angular Materialでヘッダーを実装する際は、mat-toolbarを使います。
mat-toolbarという専用のタグを使用するのです。
それでは、早速ヘッダーを追加していきましょう!
app.module.ts
まずは、app.module.tsに以下を追加します。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatToolbarModule } from '@angular/material/toolbar'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, MatToolbarModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
app.component.html
次にHTML側に以下を追加します。
<mat-toolbar> <span>This is Header.</span> </mat-toolbar>
これで準備は完了です!
ヘッダー表示の確認
早速表示を確認してみましょう。
以下のように表示されていれば成功です。
簡単でしたね!
お疲れ様でした!
ヘッダーの行を増やす方法
さて、ヘッダーの実装方法をご紹介しましたが、実はこのヘッダーは行を増やすことができます。
ヘッダーを2重、3重にすることができるのです。
app.component.html(ヘッダー2重の場合)
<mat-toolbar> <mat-toolbar-row> <span>First Header</span> </mat-toolbar-row> <mat-toolbar-row> <span>Second Header</span> </mat-toolbar-row> </mat-toolbar>
ヘッダー2重の場合の表示確認
すると、以下のように表示されます。
確かに2重になっていますね!
うまく使えば、メインのヘッダーとサブのヘッダーという感じに分けてデザインできそうです。
終わりに
今回はAngular Materialでヘッダーを実装する方法についてご紹介しました。
まとめ
- Angular Materialでヘッダーを実装する際には「mat-toolbar」を使う!
- 「mat-toolbar」は重ねることができる!
今回はここまでです。それでは。
スポンサーリンク
スポンサーリンク