メインコンテンツにスキップ
バージョン: v8

ion-menu

シャドウ

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

メニュー要素は、ルートコンテンツ要素の兄弟要素である必要があります。 コンテンツには任意の数のメニューを添付できます。 これらはテンプレートから、または `MenuController` を使用してプログラムで制御できます。

基本的な使い方​

メニュー切り替えコンポーネントを使用すると、メニューを開閉できるカスタムボタンを作成できます。

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

メニューはデフォルトで ` "start" ` 側に表示されます。 左から右への方向を使用するアプリでは、これは左側になり、右から左へのアプリでは、これは右側になります。 メニューは ` "end" ` 側に表示されるように設定することもでき、これは ` "start" ` の反対です。

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

複数のメニュー​

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

テーマ設定​

CSSシャドウパーツ​

インターフェース​

必須ではありませんが、このインターフェースは、このコンポーネントから発行されたIonicイベントでより強力な型指定を行うために、`CustomEvent` インターフェースの代わりに使用できます。

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

プロパティ​

contentId​

説明メインコンテンツの `id` です。 ルータを使用する場合、これは通常 `ion-router-outlet` です。 ルータを使用しない場合、これは通常、メインビューの `ion-content` です。 これは、`ion-menu` 内の `ion-content` のIDではありません。
属性content-id
タイプstring ｜ undefined
デフォルトundefined

disabled​

説明`true` の場合、メニューはdisabled(無効)になります。
属性disabled
タイプboolean
デフォルトfalse

maxEdgeStart​

説明メニューを開くためのドラッグのエッジしきい値。 この値を超えるドラッグ/スワイプが発生した場合、メニューはトリガーされません。
属性max-edge-start
タイプnumber
デフォルト50
説明メニューのID。
属性menu-id
タイプstring ｜ undefined
デフォルトundefined

side​

説明メニューをビューのどちら側に配置するか。
属性side
タイプ"end" ｜ "start"
デフォルト'start'

swipeGesture​

説明`true` の場合、メニューのスワイプが有効になります。
属性swipe-gesture
タイプboolean
デフォルトtrue

type​

説明メニューの表示タイプ。 利用可能なオプション： ` "overlay" `、 ` "reveal" `、 ` "push" `。
属性type
タイプ"overlay" ｜ "push" ｜ "reveal" ｜ undefined
デフォルトundefined

イベント​

名前説明バブル
ionDidCloseメニューが閉じたときに発行されます。true
ionDidOpenメニューが開いたときに発行されます。true
ionWillCloseメニューが閉じられる直前に発行されます。true
ionWillOpenメニューが開かれる直前に発行されます。true

メソッド​

close​

説明メニューを閉じます。 メニューがすでに閉じているか、閉じることができない場合は、`false` を返します。
署名close(animated?: boolean, role?: string) => Promise<boolean>

isActive​

説明メニューがアクティブな場合は `true` を返します。

メニューは、開閉できる場合、つまり有効になっていて `ion-split-pane` の一部ではない場合にアクティブになります。
署名isActive() => Promise<boolean>

isOpen​

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

open​

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

setOpen​

説明ボタンを開閉します。 操作が正常に完了できない場合は、`false` を返します。
署名setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>

toggle​

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

CSSシャドウパーツ​

名前説明
backdropメニューが開いているときにメインコンテンツの上に表示されるバックドロップ。
containerメニューコンテンツのコンテナ。

CSSカスタムプロパティ​

名前説明
--backgroundメニューの背景
--heightメニューの高さ
--max-heightメニューの最大高さ
--max-widthメニューの最大幅
--min-heightメニューの最小高さ
--min-widthメニューの最小幅
--widthメニューの幅

スロット​

このコンポーネントで使用可能なスロットはありません。

目次

このページを編集