はじめに
今回は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コンポーネントは、アプリの小さな部分にサイドコンテンツを追加するように設計されている。
これは、3つのコンポーネントを使用して実行される。
- <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;
}
完成ページ
終わりに
今回はAngular Materialのdrawerを利用しヘッダーとフッターの間に折りたたみ可能なサイドコンテンツを表示できるようにしてみた。今後はこのサイドメニューにリンクなどを貼っていく。
参照先 https://material.angular.io/components/sidenav/overview
コメント