Search results for '앵귤러 머터리얼 툴바'

Angular Material Header Toolbar

2018. 3. 11. 15:53

명절 이후 한동안 게을러졌습니다.

다시 마음을 잡고, Application에 모양을 좀 내볼까 합니다.


사이트 상단에 늘 떠있는 제목을 한 번 만들어볼게요.

이번에도 Material 디자인을 이용합니다.

header라는 컴포넌트를 하나 만듭니다.

복습차원에서 되짚어보자면 명령어는 아래와 같습니다.

ng generate component header (ng g c header)


app.component.html에 header 컴포넌트를 넣어줍니다.

<app-header></app-header>
<app-budget></app-budget>


MatToolbar를 사용하기 위해 Module을 import 하구요.

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
    ...,
    imports: [
        MatToolbarModule
    ],
    ...
})
export class AppModule { }


이제 header 컴포넌트를 작성해봅니다.

mat-toolbra라는 태그를 사용합니다.

<mat-toolbar color="primary">
  <span class="application-title">Daily Account Log</span>
  <span class="fill-remaining-space"></span>
  <span>To be added</span>
</mat-toolbar>


색상은 지정하지 않으면 기본적인 배경색인데요.

저는 primary라는 값을 넣었습니다.

mat-toolbar는 기본적으로 flex row 형태의 display를 사용합니다.

좌측에 타이틀 우측에 메뉴 영역을 배치해보겠습니다.

header.component.css에 스타일을 넣어볼게요.

.application-title{
    font-size: 20px;
}
.fill-remaining-space {
    flex: 1;
}


위처럼 넣으면 가운데 영역이 채워집니다.

결과물은 아래와 같습니다.


angular material toolbar 적용


실제 적용해보면 상단, 좌, 우에 하얀 테두리가 보일 수 있습니다.

body에 기본적인 margin과 padding이 들어있어서 그렇습니다.

style.css 에 body의 margin, padding을 없애주면 됩니다.

body{
    margin: 0;
    padding: 0;
}


소스주소: https://github.com/jsrho1023/account-book

'IT Tech > Angular' 카테고리의 다른 글

Angular Material Table  (0) 2018.04.02
Angular Material Icon  (0) 2018.03.18
Angular Directive (Structural Directive)  (0) 2018.02.12
Angular Directive (Attribute Directive)  (2) 2018.02.04
Angular Material 디자인  (0) 2018.01.27

TechTrip IT Tech/Angular