Angular Material サイドメニュー

はじめに

今回はAngular Materialのdrawerを利用しヘッダーとフッターの間に折りたたみ可能なサイドコンテンツを表示できるようにしてみる。

Angular Material, Angular CDKのインストール

プロジェクトフォルダにて下記のコマンドを入力してインストールを実行

npm install --save @angular/material @angular/cdk

Angular Materialをプロジェクトに追加させる

下記のコマンドを続けて入力して、プロジェクトにAngular Materialライブラリを追加

ng add @angular/material

このコマンドを実行することで、Angular Materialライブラリの依存関係をプロジェクトに追加できる

app.module.tsにmatsidenavのモジュールを追加する

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { KeyComponent } from './key/key.component';
import { DiatonicChordComponent } from './diatonic-chord/diatonic-chord.component';
import { NonDiatonicChordComponent } from './non-diatonic-chord/non-diatonic-chord.component';
import { ChordRefernceComponent } from './chord-refernce/chord-refernce.component';
import { ScaleRefernceComponent } from './scale-refernce/scale-refernce.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InfoComponent } from './info/info.component';
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';
import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MajorKeyComponent } from './key/major-key/major-key.component';
import { NaturalMinorKeyComponent } from './key/natural-minor-key/natural-minor-key.component';
import { HarmonicMinorKeyComponent } from './key/harmonic-minor-key/harmonic-minor-key.component';
import { MelodicMinorKeyComponent } from './key/melodic-minor-key/melodic-minor-key.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
declarations: [
AppComponent,
KeyComponent,
DiatonicChordComponent,
NonDiatonicChordComponent,
ChordRefernceComponent,
ScaleRefernceComponent,
InfoComponent,
MajorKeyComponent,
NaturalMinorKeyComponent,
HarmonicMinorKeyComponent,
MelodicMinorKeyComponent,
HeaderComponent,
FooterComponent,
],

imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatListModule,
MatChipsModule,
MatSidenavModule,
ReactiveFormsModule,
LayoutModule,
MatToolbarModule,
MatMenuModule
],

providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

drawer

drawerコンポーネントは、アプリの小さな部分にサイドコンテンツを追加するように設計されている。
これは、３つのコンポーネントを使用して実行される。

  • <mat-drawer-container>
  • <mat-drawer-content>
  • <mat-drawer>

これらのコンポーネントは、sidenavのコンポーネントと同様の役割である。
固定配置はサポートしておらず、position: absolute;等はつかえない。

AppComponentにdrawer-containerを追加する

<app-header></app-header>
<mat-drawer-container class="container" autosize>
<div class="sidenav-content">
<button type="button" mat-button (click)="drawer.toggle()">
Menu
</button>
</div>
<app-info></app-info>
<mat-drawer #drawer class="sidenav" mode="side">
<p>Auto-resizing sidenav</p>
<p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
<button (click)="showFiller = !showFiller" mat-raised-button>
Toggle extra text
</button>
</mat-drawer>
</mat-drawer-container>
<app-footer></app-footer>

 

CSSで形をととのえる

h1 {
font-size: 50px;
color: white;
padding: 15px;
background-color: #1e73be;
margin-bottom: auto;
}
.container {
width: auto;
height: auto;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.sidenav-content {
display: flex;
height: 100%;
align-items: center;
/* justify-content: center; */
}
.sidenav {
padding: 20px;
}

 

app.component.tsにshowFillerを設定する

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'music-theory';
showFiller = false;
}

 

完成ページ

Menuを押下するとsidenavが表示される

 

終わりに

今回はAngular Materialのdrawerを利用しヘッダーとフッターの間に折りたたみ可能なサイドコンテンツを表示できるようにしてみた。今後はこのサイドメニューにリンクなどを貼っていく。

 

参照先　https://material.angular.io/components/sidenav/overview

 

コメント