ionic의 ion-split-pane 사용법

소개

ionic을 사용하는데 보통의 사이드 메뉴를 사용하는 것보다 사용한 적이 없는 기술을
사용하고 싶은 노리로 ion-split-pane을 사용해 보았으므로
모처럼이므로 기사로합니다.
일단 문서를 붙여 둡니다만 깊게는 파고들 수 없습니다 w
ionic 문서

사용 이유와 사용 예

app.component.html에 쓰면 모든 페이지에 반영된다.
숨기고 싶은 페이지도 MenuController를 사용하면 숨기기 설정 가능.
ion-split-pane의 특징으로서 반응적인 대응을 마음대로 해주는 것이 대단한 편.
아래와 같이 브레이크 포인트를 설정하면 지정한 브레이크 포인트로 헤더 메뉴에 숨어 주므로 추천

app.component.html

<ion-app>
<!--  ここでブレークポイントを設定する。 when=""でmin-width指定かxsやxlの様なサイズ指定も可-->
  <ion-split-pane when="(min-width: 769px)">
<!--    このmenuIdで非表示にしたいページに設定を書くと非表示になる。後で説明します。-->
    <ion-menu menuId="custom">
      <ion-header >
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
<!--      ここにメニュー内容書き書きします。-->
      <ion-content>
        <ion-list>
<!--          auto-hide="false"を書かないとメニューが表示されまてん。これ不具合らしい。-->
          <ion-menu-toggle auto-hide="false">
            <ion-item [routerLink]="['/home']">
              <ion-icon name="home"></ion-icon>
              <ion-label>home</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

이런 느낌이 듭니다

메뉴 버튼을 헤더에 쓰기

이대로는 화면폭이 769px를 하회했을 때에 메뉴 버튼이 표시되지 않으므로 사이드 메뉴를 표시시키고 싶은 페이지에 아래와 같은 코드를 써 씁시다

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
    </ion-title>
<!--    ここにボタンを書き書き。slotで表示させる場所を指定。-->
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

이제 메뉴 버튼 겟! !

숨기고 싶다면

사이드 메뉴를 숨기고 싶은 경우가 있습니다.
로그인 화면과 카네
이 경우 아래와 같이 설정하십시오.
MenuController를 사용하여 ion-split-pane으로 설정했습니다.
menuId="custom"이 여기에서 활용됩니다.

hoge.page.ts

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

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

  constructor(private menu: MenuController) {
    this.menu.enable(false, 'custom');
  }

  ngOnInit() {
  }

}

끝에

이런 느낌으로 ion-split-pane을 사용하면 쉽게 반응형 사이드 메뉴를 만들 수 있습니다!
모처럼 ionic을 사용한다면 ionic 특유의 물건도 사용하고 싶네요.
앞으로도 ionic 특유의 물건을 사용할 기회가 있으면 기사 씁니다!