ion-menu

shadow

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

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

基本的な使い方

Menu Toggle

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

Menu Types

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

Menu Sides

Menus are displayed on the "start" side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the "end" side, which is the opposite of "start".

If menus on both sides are needed in an app, the menu can be opened by passing the side value to the open method on MenuController. If a side is not provided, the menu on the "start" side will be opened. See the multiple menus section below for an example using MenuController.

Multiple Menus

When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the enable method on the MenuController. We can then call open on a menu based on its menuId or side.

Theming

CSS Shadow Parts

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.