Angular Materialを使っていい感じにヘッダーやフッターを作成したいなぁ…
こんな疑問を解決します。
前提としては、Angular Materialを導入していることです。
まだ導入していない場合は、Angular Materialの公式ページを参考に導入してください。
今回作成するヘッダー・フッターはこちらです。
ヘッダー
タイトルとアイコンがあるヘッダーがあるものを作成していきます。
ちなみにアイコンをクリックすると、指定のページに遷移します。
フッター
それでは実際に作成していきましょう。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
MatToolbarを導入する
Angular Materialでヘッダーを作成するのに、mat-toolbarを使用するのでimportします。
..省略
import { MatToolbarModule } from '@angular/material/toolbar';
..省略
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
...省略
MatToolbarModule,
...省略
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular Materialでヘッダーを作成する
上記のようなヘッダーをします。それぞれアイコンをクリックすると、任意のページに遷移します。
まずは、headerのcomponentを作成します。
<!-- ヘッダー -->
<mat-toolbar>
<div class="dummy-space"></div>
<span class="title">header</span>
<span class="spacer"></span>
<button mat-icon-button class="bookmark-icon" (click)="goPickUp()">
<mat-icon>bookmark</mat-icon>
</button>
<button mat-icon-button class="info-icon" (click)="goInfo()">
<mat-icon>info</mat-icon>
</button>
</mat-toolbar>Angular Materialでは、mat-toolbarを使って、ヘッダーをサクッと作成できます。
それぞれのアイコンをクリックすると、任意のページに遷移するように(click)=”goPickUp()”のようにクリックアクションをつければ遷移できます。
.spacer {
flex: 1 1 auto;
}
mat-toolbar {
background-color: #F7B233;
color: #FFFFFF;
}
span {
color: white;
}CSSはこんな感じ。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor(
private router: Router
) { }
ngOnInit(): void {
}
goInfo() {
this.router.navigate(['info']);
}
goPickUp() {
this.router.navigate(['pickUp']);
}
}
(click)アクションは、routerを使って、router.navigate([‘任意のページ’])で任意のページに遷移できます。
Angularでフッターを作成する
フッターを作成していきます。
ヘッダーのように、footerのcomponentを作成します。
<ng-container>
<div class="footer">
<div class="icon-field">
<mat-icon class="icon" (click)="goTop()">home</mat-icon>
<div class="icon-text">ホーム</div>
</div>
<div class="icon-field">
<mat-icon class="icon" (click)="goList()">description</mat-icon>
<div class="icon-text">一覧</div>
</div>
</div>
</ng-container>.footer {
display: flex;
width: 100%;
height: 60px;
background-color: #F7B233;
color: #FFFFFF;
position: fixed;
bottom: 0;
text-align: center;
}
.icon-field {
width: 50%;
}
.mat-icon {
height: 32px;
width: 50px;
font-size: 36px;
padding-top: 3px;
}
.icon-text {
font-size: 12px;
}import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
constructor(
private router: Router
) { }
ngOnInit(): void {
}
goTop() {
this.router.navigate(['/']);
}
goList() {
this.router.navigate(['list']);
}
}
ヘッダー同様に、アイコンをクリックして任意のページに遷移するには、router.navigateアクションを使用します。
あとは、例えばトップ画面で、作成したヘッダーとフッターをコンポーネントを呼び出せばOKです。
<app-header></app-header>
<div>トップ画面</div>
<app-footer></app-footer>休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント