Skip to main content
Version: v8

ion-menu

shadow

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

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

基本的な使い方​

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

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

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

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

複数メニュー​

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

テーマ​

CSS Shadow Parts​

Interfaces​

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

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

プロパティ​

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​

Descriptiontrueの場合、メニューは無効化される。
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
DescriptionメニューのIDです。
Attributemenu-id
Typestring ｜ undefined
Defaultundefined

side​

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

swipeGesture​

Descriptiontrueの場合、スワイプによるメニュー操作が有効になる。
Attributeswipe-gesture
Typeboolean
Defaulttrue

type​

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

イベント​

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

メソッド​

close​

DescriptionCloses the menu. If the menu is already closed or it can't be closed, it returns false.
Signatureclose(animated?: boolean, role?: string) => 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​

Descriptionメニューが開いている場合は true を返します。
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, role?: string) => 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
backdropメニューを開いているときに、メインコンテンツの上に表示される背景です。
containerメニューの内容を格納するコンテナです。

CSSカスタムプロパティ​

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

Slots​

No slots available for this component.

Contents

Edit this page