Version: v7

ion-menu

メニューコンポーネントは、現在のビューの横からスライドしてくるナビゲーションドロワーです。デフォルトでは、開始側を使用し、LTRの場合は左から、RTLの場合は右からスライドさせますが、サイドをオーバーライドすることができます。メニューの表示はモードによって異なりますが、表示タイプは利用可能なメニュータイプのいずれかに変更することができます。

メニュー要素はルートコンテンツ要素の兄弟要素でなければなりません。コンテンツにはいくつでもメニューを付けることができる。これらのメニューはテンプレートから制御するか、MenuControllerを使用してプログラムで制御することができます。

基本的な使い方

<ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">This is the menu content.</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
</div>

menu toggle コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。

<ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-menu-toggle>
      <ion-button>Click to close the menu</ion-button>
    </ion-menu-toggle>
  </ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-menu-toggle>
      <ion-button>Click to open the menu</ion-button>
    </ion-menu-toggle>
  </ion-content>
</div>

typeプロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。

src/app/example.component.html
src/app/example.component.ts

<ion-menu [type]="menuType" content-id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-menu-toggle>
      <ion-button>Click to close the menu</ion-button>
    </ion-menu-toggle>
  </ion-content>
</ion-menu>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <h2>Select an overlay type:</h2>
    <ion-radio-group [(ngModel)]="menuType">
      <ion-item>
        <ion-radio value="overlay">
          <code>overlay</code>
        </ion-radio>
      </ion-item>
      <ion-item>
        <ion-radio value="reveal">
          <code>reveal</code>
        </ion-radio>
      </ion-item>
      <ion-item>
        <ion-radio value="push">
          <code>push</code>
        </ion-radio>
      </ion-item>
    </ion-radio-group>
    <br />
    <ion-menu-toggle>
      <ion-button>Click to open the menu</ion-button>
    </ion-menu-toggle>
  </ion-content>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  menuType: string = 'overlay';
}

メニューはデフォルトでは"start"側に表示されます。左から右へ移動するアプリでは左側に、右から左へ移動するアプリでは右側に表示されます。メニューは"start"の反対側である"end"側に表示させることもできます。

アプリ内で両サイドのメニューが必要な場合、 MenuController の open メソッドに side の値を渡すことでメニューを開くことができます。sideが指定されない場合は、"start"側のメニューが開かれる。MenuController` を使用した例については、下記の複数メニューセクションを参照ください。

<ion-menu side="end" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">This is the menu content.</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
      <ion-buttons slot="end">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
</div>

複数メニュー

同じサイドに複数のメニューが存在する場合、サイドではなくIDで参照する必要があります。そうしないと、間違ったメニューがアクティブになる可能性がある。

src/app/example.component.html
src/app/example.component.ts

<ion-menu menuId="first-menu" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>First Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">This is the first menu content.</ion-content>
</ion-menu>

<ion-menu menuId="second-menu" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Second Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">This is the second menu content.</ion-content>
</ion-menu>

<ion-menu side="end" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>End Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">This is the end menu content.</ion-content>
</ion-menu>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <p>Tap a button below to open a specific menu.</p>

    <ion-button expand="block" (click)="openFirstMenu()">Open First Menu</ion-button>
    <ion-button expand="block" (click)="openSecondMenu()">Open Second Menu</ion-button>
    <ion-button expand="block" (click)="openEndMenu()">Open End Menu</ion-button>
  </ion-content>
</div>

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

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  constructor(private menuCtrl: MenuController) {}

  openFirstMenu() {
    /**
     * Open the menu by menu-id
     * We refer to the menu using an ID
     * because multiple "start" menus exist.
     */
    this.menuCtrl.open('first-menu');
  }

  openSecondMenu() {
    /**
     * Open the menu by menu-id
     * We refer to the menu using an ID
     * because multiple "start" menus exist.
     */
    this.menuCtrl.open('second-menu');
  }

  openEndMenu() {
    /**
     * Open the menu by side
     * We can refer to the menu by side
     * here because only one "end" menu exists
     */
    this.menuCtrl.open('end');
  }
}

テーマ

CSS Shadow Parts

src/app/example.component.html
src/app/example.component.css

<ion-app>
  <ion-menu contentId="main-content">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Menu Content</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">This is the menu content.</ion-content>
  </ion-menu>
  <div class="ion-page" id="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
  </div>
</ion-app>

ion-menu::part(backdrop) {
  background-color: rgba(255, 0, 255, 0.5);
}

ion-menu::part(container) {
  border-radius: 0 20px 20px 0;

  box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
}

Interfaces

MenuCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface MenuCustomEvent<T = any> extends CustomEvent {
  detail: T;
  target: HTMLIonMenuElement;
}

プロパティ

contentId

Description	メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。
Attribute	`content-id`
Type	`string ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、メニューは無効化される。
Attribute	`disabled`
Type	`boolean`
Default	`false`

maxEdgeStart

Description	ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。
Attribute	`max-edge-start`
Type	`number`
Default	`50`

menuId

Description	メニューのIDです。
Attribute	`menu-id`
Type	`string ｜ undefined`
Default	`undefined`

side

Description	メニューがビューのどの側に配置されるべきか。
Attribute	`side`
Type	`"end" ｜ "start"`
Default	`'start'`

swipeGesture

Description	`true`の場合、スワイプによるメニュー操作が有効になる。
Attribute	`swipe-gesture`
Type	`boolean`
Default	`true`

type

Description	メニューの表示形式を指定します。利用可能なオプション。overlay"`,` "reveal"`,` "push"`.
Attribute	`type`
Type	`string ｜ undefined`
Default	`undefined`

イベント

Name	Description
`ionDidClose`	メニューが閉じられたときに発行されます。
`ionDidOpen`	メニューが開いているときに発行されます。
`ionWillClose`	メニューが閉じられようとするときに発行されます。
`ionWillOpen`	メニューが開かれようとするときに発行されます。

メソッド

close

Description	メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。
Signature	`close(animated?: boolean) => Promise<boolean>`

isActive

Description	メニューがアクティブであれば `true` を返します。メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味します。
Signature	`isActive() => Promise<boolean>`

isOpen

Description	メニューが開いている場合は `true` を返します。
Signature	`isOpen() => Promise<boolean>`

open

Description	メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返します。
Signature	`open(animated?: boolean) => Promise<boolean>`

setOpen

Description	ボタンを開いたり閉じたりします。操作が正常に完了しない場合は `false` を返します。
Signature	`setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>`

toggle

Description	メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、`false`を返します。
Signature	`toggle(animated?: boolean) => Promise<boolean>`

CSS Shadow Parts

Name	Description
`backdrop`	メニューを開いているときに、メインコンテンツの上に表示される背景です。
`container`	メニューの内容を格納するコンテナです。

CSSカスタムプロパティ

Name	Description
`--background`	メニューの背景
`--height`	メニューの高さ
`--max-height`	メニューの最大の高さ
`--max-width`	メニューの最大幅
`--min-height`	メニューの高さの最小値
`--min-width`	メニューの最小幅
`--width`	メニューの幅

Slots

No slots available for this component.

ion-menu

基本的な使い方

Menu Toggle

Menu Types

Menu Sides

複数メニュー

テーマ

CSS Shadow Parts

Interfaces

MenuCustomEvent

プロパティ

contentId

disabled

maxEdgeStart

menuId

side

swipeGesture

type

イベント

メソッド

close

isActive

isOpen

open

setOpen

toggle

CSS Shadow Parts

CSSカスタムプロパティ

Slots

Contents

基本的な使い方​

Menu Toggle​

Menu Types​

Menu Sides​

複数メニュー​

テーマ​

CSS Shadow Parts​

Interfaces​

MenuCustomEvent​

プロパティ​

contentId​

disabled​

maxEdgeStart​

menuId​

side​

swipeGesture​

type​

イベント​

メソッド​

close​

isActive​

isOpen​

open​

setOpen​

toggle​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Menu Toggle

Menu Types

Menu Sides

複数メニュー

テーマ

CSS Shadow Parts

Interfaces

MenuCustomEvent

プロパティ

contentId

disabled

maxEdgeStart

menuId

side

swipeGesture

type

イベント

メソッド

close

isActive

isOpen

open

setOpen

toggle

CSS Shadow Parts

CSSカスタムプロパティ

Slots