IONIC Menu 사용법

ionic menu 사용

ion-menu 는 사이드 메뉴를 만드는데 사용된다.

1
2
3
4
5
6
7
8
9
10
<!-- 템플릿 사이드 코드 -->
<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

  • 사이드 메뉴를 열 수 있는 버튼 생성
1
2
3
4

<button menuToggle>
	<ion-icon name="menu"></ion-icon>
</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Component } from '@angular/core';
import { MenuController } from 'ionic-angular';

@Component({...})
export class MyPage {

 constructor(public menuCtrl: MenuController) {

 }

 openMenu() {
   this.menuCtrl.open();
 }

 closeMenu() {
   this.menuCtrl.close();
 }

 toggleMenu() {
   this.menuCtrl.toggle();
 }

}