ion-menu

shadow

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

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

基本用法

菜单切换器

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

菜单类型

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

菜单侧边

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

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

多个菜单

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

主题定制

CSS 影子部件

接口

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	string ｜ 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) => 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 影子部件

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

插槽

No slots available for this component.