[Ionic x Vue] メニュー（ドロワーメニュー）を表示する

はじめに

Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。

今回はメニューの使い方を解説します。

事前準備

こちらのブログ を通して作成したプロジェクトをベースに進めます。

メニューとは

メニューは、画面全体をスライドする形で表示する画面のことを指します。Androidでは「ドロワーメニュー」という名前で使われていることから、ドロワーメニューという名前で一般化してきています。ハンバーガーメニューとも言います。

• ion-menu - Ionic Framework 日本語ドキュメンテーション

次のように表示されます。

メニューを実装する

まずメニューは画面全体に関わるコンポーネントなので、画面コンポーネントより上の階層に配置する必要があります。ということで App.vue に ion-menu を配置します。/home と /about へのリンクに飛べるようにします。

App.vue

<template>
  <div id="app">
    <ion-app>
      <ion-menu type="push" content-id="content">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item button href="/">Home</ion-item>
            <ion-item button href="/about">About</ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

Home.vue の ion-header に ion-buttons と ion-menu-toggle を配置します。slot="start" を設定するとヘッダーの左側にボタンが表示されます。

Home.vue

<template>
  <ion-page class="ion-page" id="content">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-toggle>
            <ion-button @click="this.$ionic.menuController.open">
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-menu-toggle>
        </ion-buttons>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
    </ion-content>
  </ion-page>
</template>

なお、ルート階層の ion-page の id は非常に重要で、上記の App.vue の ion-menu に設定している content-id とリンクしています。これが揃っていないと以下のようなエラーとなり正常に動きません。

Menu: must have a "content" element to listen for drag events on.

これでメニューが表示できました。

いざという時に使えるメニュー

どうしてもリンクを置きたいけど場所がない…！なんて時にメニューは便利ですよね。ただ、突っ込みすぎてカオスにならないように気をつけたいですね。