第2回 Angular Material 徹底解説！- Button

本記事でできること
環境
説明
ソースコード
参考文献

本記事でできること

環境構築はこちらになります｡

環境

$ npm -v
7.21.1
$ node -v
16.9.1

説明

種類

属性	説明
mat-button	通常のボタン｡背景､枠線がなく､フォーカスを当てると薄い背景が表示される｡
mat-raised-button	長方形のボタン｡背景色､枠線がある､一般的なボタン｡
mat-flat-button	長方形のボタン｡背景色はあるが､枠線がないボタン｡
mat-stroked-buton	長方形のボタン｡背景色はないが､枠線があるボタン｡
mat-icon-button	アイコンだけの表示したボタン｡
mat-fab	丸型のボタン｡中にアイコンや文字を1つ表示するボタン｡
mat-mini-fab	mat-fabを小さくしたもの｡

利用できるアイコンは以下になります｡

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design ...

専用パラメータ

パラメータ名	説明
color : ThemePalette	ボタンの色｡basic､primary､accent､warnなどがある｡
disabled : boolean	ボタンの活性状態｡

専用メソッド

メソッド名	パラメータ	説明
focus	origin : FocusOrigin ? options : FocusOptions ?	フォーカスされた際に発火されるイベント｡

ソースコード

	import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
	import { BrowserModule } from '@angular/platform-browser';

	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

	import { FormsModule } from '@angular/forms';

	import { MatSliderModule } from '@angular/material/slider';
	import { MatButtonModule } from '@angular/material/button';
	import { MatIconModule } from '@angular/material/icon';

	import { SliderComponent } from './sample/slider/slider.component';
	import { ButtonComponent } from './sample/button/button.component';

	@NgModule({
	declarations: [
	AppComponent,
	SliderComponent,
	ButtonComponent
	],
	imports: [
	BrowserModule,
	AppRoutingModule,
	BrowserAnimationsModule,
	FormsModule,
	MatButtonModule, // 追加
	MatIconModule, // 追加
	MatSliderModule
	],
	schemas : [ CUSTOM_ELEMENTS_SCHEMA ], // 追加
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw app.module.ts hosted with ❤ by GitHub

	<h2>Basic</h2>
	<div>
	<button mat-button color="basic" (click)="click('basic-basic')" (focus)="focus('basic-basic')">Basic</button>
	<button mat-button color="primary">Primary</button>
	<button mat-button color="warn">Warn</button>
	<button mat-button disabled>Disabled</button>
	<a mat-button href="https://google.com">Link</a>
	</div>
	<br />
	<h2>Raised</h2>
	<div>
	<button mat-raised-button color="basic">Basic</button>
	<button mat-raised-button color="primary">Primary</button>
	<button mat-raised-button color="warn">Warn</button>
	<a mat-raised-button href="https://google.com">Link</a>
	</div>
	<br />

	<h2>Stroked</h2>
	<div>
	<button mat-stroked-button color="basic">Basic</button>
	<button mat-stroked-button color="primary">Primary</button>
	<button mat-stroked-button color="warn">Warn</button>
	<a mat-stroked-button href="https://google.com">Link</a>
	</div>
	<br />

	<h2>Flat</h2>
	<div>
	<button mat-flat-button color="basic">Basic</button>
	<button mat-flat-button color="primary">Primary</button>
	<button mat-flat-button color="warn">Warn</button>
	<a mat-flat-button href="https://google.com">Link</a>
	</div>
	<br />

	<h2>Icon</h2>
	<div>
	<button mat-icon-button color="basic">
	<mat-icon>favorite</mat-icon>
	</button>
	<button mat-icon-button color="primary">
	<mat-icon>favorite</mat-icon>
	</button>
	<button mat-icon-button color="warn">
	<mat-icon>favorite</mat-icon>
	</button>
	</div>
	<br />

	<h2>Fab</h2>
	<div>
	<button mat-fab color="basic">
	<mat-icon aria-label="basic">home</mat-icon>
	</button>
	<button mat-fab color="primary">
	<mat-icon aria-label="primary">home</mat-icon>
	</button>
	<button mat-fab color="warn">
	<mat-icon aria-label="warn">home</mat-icon>
	</button>
	</div>
	<br />

	<h2>Fab Mini</h2>
	<div>
	<button mat-mini-fab color="basic">
	<mat-icon aria-label="basic">home</mat-icon>
	</button>
	<button mat-mini-fab color="primary">
	<mat-icon aria-label="primary">home</mat-icon>
	</button>
	<button mat-mini-fab color="warn">
	<mat-icon aria-label="warn">home</mat-icon>
	</button>
	</div>

view raw button.component.html hosted with ❤ by GitHub

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

	@Component({
	selector: 'app-button',
	templateUrl: './button.component.html',
	styleUrls: ['./button.component.scss']
	})
	export class ButtonComponent implements OnInit {

	constructor() { }

	ngOnInit(): void {
	}

	click(str : string) : void {
	console.log(`click – ${str}`);
	}

	focus(str : string) : void {
	console.log(`focus – ${str}`);
	}

	}