ion-menu

shadow

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

Basic Usage

Menu Toggle

The ion-menu-toggle component can be used to create custom button that can open or close the menu.

Menu Types

The type property can be used to customize how menus display in your application.

Theming

CSS Shadow Parts

Interfaces

MenuCustomEvent

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

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

プロパティ

contentId

Description	The 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.
Attribute	content-id
Type	string ｜ undefined
Default	undefined

disabled

Description	If true, the menu is disabled.
Attribute	disabled
Type	boolean
Default	false

maxEdgeStart

Description	The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
Attribute	max-edge-start
Type	number
Default	50

menuId

Description	An id for the menu.
Attribute	menu-id
Type	string ｜ undefined
Default	undefined

side

Description	Which side of the view the menu should be placed.
Attribute	side
Type	"end" ｜ "start"
Default	'start'

swipeGesture

Description	If true, swiping the menu is enabled.
Attribute	swipe-gesture
Type	boolean
Default	true

type

Description	The display type of the menu. Available options: "overlay", "reveal", "push".
Attribute	type
Type	string ｜ undefined
Default	undefined

イベント

Name	Description
ionDidClose	Emitted when the menu is closed.
ionDidOpen	Emitted when the menu is open.
ionWillClose	Emitted when the menu is about to be closed.
ionWillOpen	Emitted when the menu is about to be opened.

メソッド

close

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

isActive

Description	Returns 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.
Signature	isActive() => Promise<boolean>

isOpen

Description	Returns true is the menu is open.
Signature	isOpen() => Promise<boolean>

open

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

setOpen

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

toggle

Description	Toggles 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.
Signature	toggle(animated?: boolean) => Promise<boolean>

CSS Shadow Parts

Name	Description
backdrop	The backdrop that appears over the main content when the menu is open.
container	The container for the menu content.

CSSカスタムプロパティ

Name	Description
--background	Background of the menu
--height	Height of the menu
--max-height	Maximum height of the menu
--max-width	Maximum width of the menu
--min-height	Minimum height of the menu
--min-width	Minimum width of the menu
--width	Width of the menu

Slots

No slots available for this component.