Skip to main content
Version: v7

ion-menu

shadow

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

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

基本的な使い方​

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

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

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

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

複数メニュー​

同じサイドに複数のメニューが存在する場合、開きたいメニューを開く前にそのメニューを有効にする必要があります。これは MenuController の enable メソッドを呼び出すことで行うことができます。次に、メニューの menuId または side に基づいて open を呼び出すことができます。

テーマ​

CSS Shadow Parts​

Interfaces​

必須ではありませんが、このコンポーネントから発行される 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 ではありません。
Attributecontent-id
Typestring ｜ undefined
Defaultundefined

disabled​

Descriptiontrueの場合、メニューは無効化される。
Attributedisabled
Typeboolean
Defaultfalse

maxEdgeStart​

Descriptionドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。
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​

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

イベント​

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

メソッド​

close​

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

isActive​

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

isOpen​

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

open​

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

setOpen​

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

toggle​

Descriptionメニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、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