Angular-Material을 이용하여 개폐 메뉴 구현
이 기사의 목적
Angular에서 앱에 자주 있는 개폐식 메뉴(이 명칭이 올바른지 미묘하지만...)를 만드는 방법을 소개합니다.
Angular-material을 이용하여 쉽게 구현할 수 있습니다. 본 기사에서는 Angular11을 기반으로 구현을 실시하고 있습니다.
구현 시작
절차는 모듈을 가져오고 템플릿을 추가하고 구현합니다.
우선, 대상의 모듈에 아래와 같은 모듈을 import 해 둡니다.
또한 이번에는 헤더에 개폐 메뉴 버튼을 두기 때문에 헤더 디자인 용 모듈도 함께 import 해 둡니다.
import { MatToolbarModule } from '@angular/material/toolbar'; // ヘッダー用
import { MatMenuModule } from '@angular/material/menu'; // 開閉メニュー用
import { MatIconModule } from '@angular/material/icon'; // アイコン用
템플릿 측에서는 아래와 같이 기재해 주십시오.
header.component.ts
<mat-toolbar color="primary">
<span>アプリタイトル</span>
<span class="spacer"></span>
<button mat-button [matMenuTriggerFor]="menu">
<mat-icon>account_circle</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>プロフィール</button>
<button mat-menu-item>ログアウト</button>
</mat-menu>
</mat-toolbar>
mat-toolbar로 헤더 부분을 만들고 mat-menu를 이용하여 쉽게 개폐 메뉴를 만들 수 있습니다.
프로필, 로그아웃 등의 항목에 아이콘을 붙여 주면 그것 같아집니다! !
마지막으로...
이번 기사는 Angular-material의 문서를 참고로 하겠습니다.
htps // 마테리아 l. 앙구 r. 이오 / 코 m 포넨 ts / 메누 / 오 오 r ゔ 아 w
Reference
이 문제에 관하여(Angular-Material을 이용하여 개폐 메뉴 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Okkun555/items/f8badd70961e969564e0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)