ionicのion-split-paneの使い方 #CSS

はじめに

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特有の物を使う機会があったら記事書きます！

ionicのion-split-paneの使い方