今回もAngular Materialについてみていきましょう!
Webアプリによくあるヘッダーですが、皆さんは実装の仕方はご存知でしょうか?
CSSで実装したり、Bootstrapで実装しても良いのですが、実はAngular Materialに便利なコンポーネントがあるんです!
それを使えば初心者でも簡単にヘッダーを実装することができますよ。
そんなわけで、今回はAngular Materialでヘッダーを実装する方法についてご紹介しますね。
本記事の環境は以下の通りです。
- Angular CDK:8.2.3
- Angular CLI:8.3.20
- Angular Material:8.2.3
目次
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」は重ねることができる
今回はここまでです。それでは。