菜单组件

shadow

菜单组件是一个从当前视图侧面滑入的导航抽屉。默认情况下，它使用起始侧（对于从左到右的布局是左侧，对于从右到左的布局是右侧），但可以通过配置覆盖该侧边。菜单的显示方式会根据模式有所不同，不过显示类型可以更改为任何可用的菜单类型。

菜单元素应该是根内容元素的同级元素。可以附加任意数量的菜单到内容上。这些菜单可以通过模板控制，也可以使用 MenuController 以编程方式控制。

基本用法

菜单切换开关

menu toggle 组件可用于创建可以打开或关闭菜单的自定义按钮。

菜单类型

type 属性可用于自定义菜单在应用程序中的显示方式。

菜单侧边

菜单默认显示在 "start" 侧。在使用从左到右方向的应用中，这是左侧；在从右到左的应用中，这将是右侧。菜单也可以设置为显示在 "end" 侧，这与 "start" 侧相反。

如果应用中需要同时使用两侧的菜单，可以通过将 side 值传递给 MenuController 上的 open 方法来打开菜单。如果未提供侧边，将打开 "start" 侧的菜单。请参阅下面的多菜单部分，查看使用 MenuController 的示例。

多菜单

当同一侧存在多个菜单时，我们需要通过 ID 而不是侧边来引用它们。否则，可能会激活错误的菜单。

主题定制

CSS Shadow Parts

接口

MenuCustomEvent

虽然这不是必需的，但此接口可用于替代 CustomEvent 接口，以便为此组件发出的 Ionic 事件提供更强的类型定义。

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	"overlay" ｜ "push" ｜ "reveal" ｜ undefined
Default	undefined

事件

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

方法

close

Description	Closes the menu. If the menu is already closed or it can't be closed, it returns false.
Signature	close(animated?: boolean, role?: string) => Promise<boolean>
Parameters	animated: If true, the menu will animate when closing. If false, the menu will close instantly without animation. Defaults to true. role: The role of the element that is closing the menu. This can be useful in a button handler for determining which button was clicked to close the menu. Some examples include: "cancel", "destructive", "selected", and "backdrop".

isActive

Description	Returns true if 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>
Parameters	animated: If true, the menu will animate when opening. If false, the menu will open instantly without animation. Defaults to true.

setOpen

Description	Opens or closes the menu. If the operation can't be completed successfully, it returns false.
Signature	setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>
Parameters	shouldOpen: If true, the menu will open. If false, the menu will close. animated: If true, the menu will animate when opening/closing. If false, the menu will open/close instantly without animation. role: The role of the element that is closing the menu.

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>
Parameters	animated: If true, the menu will animate when opening/closing. If false, the menu will open/close instantly without animation. Defaults to true.

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 自定义属性

iOS

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

MD

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

插槽

No slots available for this component.