ion-menu

shadow

菜单组件是一个从当前视图侧面滑入的导航抽屉。默认情况下，它使用起始侧，使其在 LTR 中从左侧滑入，在 RTL 中从右侧滑入，但可以覆盖侧边设置。菜单将根据模式以不同方式显示，但显示类型可以更改为任何可用的菜单类型。

菜单元素应与根内容元素同级。可以有任何数量的菜单附加到内容。这些可以从模板中控制，或使用 MenuController 以编程方式控制。

基本用法

菜单切换

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

菜单类型

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

说明	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.
属性	content-id
类型	string ｜ undefined
默认值	undefined

disabled

说明	If true, the menu is disabled.
属性	disabled
类型	boolean
默认值	false

maxEdgeStart

说明	The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
属性	max-edge-start
类型	number
默认值	50

menuId

说明	An id for the menu.
属性	menu-id
类型	string ｜ undefined
默认值	undefined

side

说明	Which side of the view the menu should be placed.
属性	side
类型	"end" ｜ "start"
默认值	'start'

swipeGesture

说明	If true, swiping the menu is enabled.
属性	swipe-gesture
类型	boolean
默认值	true

type

说明	The display type of the menu. Available options: "overlay", "reveal", "push".
属性	type
类型	string ｜ undefined
默认值	undefined

事件

Name	说明	冒泡
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

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

isActive

说明	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.
签名	isActive() => Promise<boolean>

isOpen

说明	Returns true is the menu is open.
签名	isOpen() => Promise<boolean>

open

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

setOpen

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

toggle

说明	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.
签名	toggle(animated?: boolean) => Promise<boolean>

CSS 阴影部分

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

CSS 自定义属性

Name	说明
--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

插槽

该组件没有可用的插槽。