メインコンテンツまでスキップ
Version: v6

ion-menu

shadow

コンテンツ

Menuコンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。 デフォルトでは左からスライドしますが、サイドはオーバーライドできます。 Menuの表示はmodeによって異なりますが、表示するtypeはmenuのtypeによって変更することができます。 menu要素は、root content要素と同じ深度である必要があります。 コンテンツにつけるMenuの数に制限はありません。 これらはテンプレートから、またはプログラムでMenuControllerを使用して制御できます。

Interfaces

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

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

使い方

<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>

<ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
<ion-header>
<ion-toolbar color="tertiary">
<ion-title>Custom Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>

<ion-menu side="end" type="push" contentId="main">
<ion-header>
<ion-toolbar color="danger">
<ion-title>End Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>

<ion-router-outlet id="main"></ion-router-outlet>
import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
selector: 'menu-example',
templateUrl: 'menu-example.html',
styleUrls: ['./menu-example.css'],
})
export class MenuExample {

constructor(private menu: MenuController) { }

openFirst() {
this.menu.enable(true, 'first');
this.menu.open('first');
}

openEnd() {
this.menu.open('end');
}

openCustom() {
this.menu.enable(true, 'custom');
this.menu.open('custom');
}
}
.my-custom-menu {
--width: 500px;
}

プロパティ

contentId

DescriptionThe id of the main content. When using a router this is typically ion-router-outlet. When not using a router, this is typically your main view's ion-content. This is not the id of the ion-content inside of your ion-menu.
Attributecontent-id
Typestring | undefined
Defaultundefined

disabled

DescriptionIf true, the menu is disabled.
Attributedisabled
Typeboolean
Defaultfalse

maxEdgeStart

DescriptionThe edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
Attributemax-edge-start
Typenumber
Default50
DescriptionAn id for the menu.
Attributemenu-id
Typestring | undefined
Defaultundefined

side

DescriptionWhich side of the view the menu should be placed.
Attributeside
Type"end" | "start"
Default'start'

swipeGesture

DescriptionIf true, swiping the menu is enabled.
Attributeswipe-gesture
Typeboolean
Defaulttrue

type

DescriptionThe display type of the menu. Available options: "overlay", "reveal", "push".
Attributetype
Typestring | undefined
Defaultundefined

イベント

NameDescription
ionDidCloseEmitted when the menu is closed.
ionDidOpenEmitted when the menu is open.
ionWillCloseEmitted when the menu is about to be closed.
ionWillOpenEmitted when the menu is about to be opened.

メソッド

close

DescriptionCloses the menu. If the menu is already closed or it can't be closed, it returns false.
Signatureclose(animated?: boolean) => Promise<boolean>

isActive

DescriptionReturns true is the menu is active.

A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a ion-split-pane.
SignatureisActive() => Promise<boolean>

isOpen

DescriptionReturns true is the menu is open.
SignatureisOpen() => Promise<boolean>

open

DescriptionOpens the menu. If the menu is already open or it can't be opened, it returns false.
Signatureopen(animated?: boolean) => Promise<boolean>

setOpen

DescriptionOpens or closes the button. If the operation can't be completed successfully, it returns false.
SignaturesetOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>

toggle

DescriptionToggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns false.
Signaturetoggle(animated?: boolean) => Promise<boolean>

CSS Shadow Parts

NameDescription
backdropThe backdrop that appears over the main content when the menu is open.
containerThe container for the menu content.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the menu
--heightHeight of the menu
--max-heightMaximum height of the menu
--max-widthMaximum width of the menu
--min-heightMinimum height of the menu
--min-widthMinimum width of the menu
--widthWidth of the menu

Slots

No slots available for this component.

View Source