[angular material] 앵귤러 Button tag 종류

Angular material에서 제공하는 버튼은 바로 기본적으로 제공하고 있는 기능 만으로도 충분히 사용 가능 합니다.

다양한 형태 및 기본으로 제공되는 아이콘만으로도 혼자서 사이트를 꾸미는 것도 가능하리라 생각 됩니다.

버튼의 종류에 대한 간단한 설명을 한다면

속성	설명
mat-button	사각형 텍스트 버튼으로 채우기, 테두리, 높이가 없다
mat-stroked-button	사각형 텍스트 버튼으로 테두리가 있고 채우기, 높이가 없다
mat-flat-button	사각형 텍스트 버튼으로 채우기가 있고 높이가 없다
mat-raised-button	사각형 텍스트 버튼으로 채우기, 테두리, 높이가 있다
mat-fab	원형 버튼으로 텍스트, 아이콘을 추가할 수 있다
mat-mini-fab	작은 원형 버튼으로 텍스트, 아이콘을 추가할 수 있다
mat-icon-button	투명한 버튼으로 아이콘을 추가 할 수 있다

이렇게 설명을 할 수가 있겠고요.

버튼의 모양은

각 속성별로 이렇게 생겼습니다.

 

그럼 구현을 해보도록 하겠습니다.

 

 

1. Component 추가

 

제일 먼저 component 추가를 해보겠습니다.

component가 화면 하나를 만드는 것으로 생각 하면 됩니다.

프로젝트에 마우스를 놓고 우측 버튼을 클릭 합니다.

 

New > Component

 

를 선택 하면 컴포넌트 생성 팝업 창이 나타납니다.

저는 새로 생성하는 component 명칭을

material-test

로 하였습니다.

[Finish] 버튼을 클릭하고 잠시 기다립니다.

시간이 지나면 프로젝트에 material-test 폴더가 생기고 파일들도 만들어 집니다.

2. 화면 추가

 

material-test로 화면을 만들었으니 웹 브라우저에서 볼 수 있도록 추가를 해줘야 합니다.

 

material-test.component.ts

파일에 명시된

app-material-test를 index.htm에 추가하는 작업입니다.

2.1 module에 추가

 

/myNgProject/src/app/app.module.ts

파일을 열어보니 생성하면서 자동으로 material-test component 가 import 되어 있습니다.

import { MaterialTestComponent } from './material-test/material-test.component';

자동으로 import 되었다고 화면도 자동으로 연결 되는게 아닙니다.

이걸 사용하려면 bootstrap에 추가를 해주어야 합니다.

bootstrap: [AppComponent, MaterialTestComponent]

2.2 html에 추가

module에 추가해서 사용 할 수 있도록 했으니 이제 화면에 추가를 합니다.

/myNgProject/src/index.html

파일을 열고 추가를 합니다.

<app-material-test></app-material-test>

이제 새로 생성한 material-test.component.html 에 HTML 작업을 하면 index.html에 나타나게 됩니다.

 

2.3 버튼 html 작업

새로 추가한 material-test.component.html에 버튼 관련 html tag 작업을 진행 합니다.

html 일부분을 가져와 보았습니다.

<h3>mat-raised-button</h3>
<div class="button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

이런식으로 작업을 하면 되겠죠.

 

이렇게 하면 화면 작업은 끝입니다.

이제 설정을 해야 합니다.

 

3. 버튼 환경 설정

 

html에 버튼 태그 작업을 하면 바로 적용 되는게 아니라 angular에서 제공하는 module, css등을 추가해야 합니다.

 

3.1 Module 추가

/myNgProject/src/app/app.module.ts

파일을 열고 버튼과 버튼에 추가하는 아이콘 관련 모듈을 추가해 줍니다.

import { MatButtonModule } from '@angular/material/button';

import { MatIconModule } from '@angular/material/icon';

그리고 imports에 모듈명을 추가해 줍니다.

 

이건 일부분만 가져오기 그래서 전체적인 파일 모습은

 

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

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }

이렇습니다.

3.2 css 추가

CSS를 추가하는 방법은 2가지가 있습니다.

 

index.html 파일에 링크형식으로 불러서

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

이렇게 추가 하거나

/src/styles.css 파일에

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

요렇게 추가하면 됩니다.

저는 개인적으로 두번째를 선호합니다.

 

4. 테스트

모든 작업이 완료 되었습니다.

테스트를 진행 하면 됩니다.

 

프로젝트에 마우스를 대고 우측 버튼 > Run As > Angular Web Application을 선택하면

결과를 보실 수 있습니다.

5. Source Code

Button을 테스트 하기 위해 작업한 파일들이 어떤건지 한번 볼까요?

 

html 과 mode 을 제외하고는 환경설정 관련 입니다.

/src/app/material-test/material-test.component.css

.button-row button,
.button-row a {
  margin-right: 8px;
}

/src/app/material-test/material-test.component.html

<p>
  material button test!
</p>
<h3>mat-button</h3>
<div class="button-row">
  <button mat-button>Basic</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
  <button mat-button color="warn">Warn</button>
  <button mat-button disabled>Disabled</button>
  <a mat-button routerLink=".">Link</a>
</div>

<h3>mat-stroked-button</h3>
<div class="button-row">
  <button mat-stroked-button>Basic</button>
  <button mat-stroked-button color="primary">Primary</button>
  <button mat-stroked-button color="accent">Accent</button>
  <button mat-stroked-button color="warn">Warn</button>
  <button mat-stroked-button disabled>Disabled</button>
  <a mat-stroked-button routerLink=".">Link</a>
</div>

<h3>mat-flat-button</h3>
<div class="button-row">
  <button mat-flat-button>Basic</button>
  <button mat-flat-button color="primary">Primary</button>
  <button mat-flat-button color="accent">Accent</button>
  <button mat-flat-button color="warn">Warn</button>
  <button mat-flat-button disabled>Disabled</button>
  <button mat-flat-button color="warn">favorite</button>
  <a mat-flat-button routerLink=".">Link</a>
</div>

<h3>mat-raised-button</h3>
<div class="button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

<h3>mat-fab</h3>
<div class="button-row">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="icon">free_breakfast</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

<h3>mat-mini-fab</h3>
<div class="button-row">
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
  <button mat-mini-fab color="warn">Warn</button>
  <button mat-mini-fab disabled>Disabled</button>
  <button mat-mini-fab>
    <mat-icon aria-label="icon">free_breakfast</mat-icon>
  </button>
  <a mat-mini-fab routerLink=".">Link</a>
</div>

<h3>mat-icon-button</h3>
<div class="button-row">
  <button mat-icon-button>
    <mat-icon aria-label="test">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="primary">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="accent">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="warn">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button disabled>
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
</div>

/src/app/app.module.ts

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

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }

/src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyNgProject</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

  <app-material-test></app-material-test>
</body>
</html>

/src/styles.css

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

- copy coding -