ion-menu

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

🌐 The menu component is a navigation drawer that slides in from the side of the current view. By default, it uses the start side, making it slide in from the left for LTR and right for RTL, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.

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

🌐 The menu element should be a sibling to the root content element. There can be any number of menus attached to the content. These can be controlled from the templates, or programmatically using the MenuController.

基本用法

🌐 Basic Usage

🌐 Menu Toggle

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

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

🌐 Menu Types

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

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

🌐 Menu Sides

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

🌐 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".

如果应用需要两侧的菜单，可以通过向 MenuController 上的 open 方法传递 side 值来打开菜单。如果未提供某一侧，则将打开 "start" 侧的菜单。有关使用 MenuController 的示例，请参见下文的多重菜单部分。

🌐 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

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

🌐 When multiple menus exist on the same side, we need refer to them by ID instead of side. Otherwise, the wrong menu may be activated.

主题化

🌐 Theming

CSS 阴影部分

🌐 CSS Shadow Parts

接口

🌐 Interfaces

MenuCustomEvent

虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便对从此组件发出的 Ionic 事件进行更强类型的处理。

🌐 While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

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

属性

🌐 Properties

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`

事件

🌐 Events

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`

方法

🌐 Methods

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 阴影部分

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

🌐 CSS Custom Properties

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

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.

ion-menu

基本用法

菜单切换

菜单类型

菜单端

多个菜单

主题化

CSS 阴影部分

接口

MenuCustomEvent

属性

contentId

disabled

maxEdgeStart

menuId

side

swipeGesture

type

事件

方法

close

isActive

isOpen

open

setOpen

toggle

CSS 阴影部分

CSS 自定义属性

插槽

目录

基本用法​

菜单切换​

菜单类型​

菜单端​

多个菜单​

主题化​

CSS 阴影部分​

接口​

MenuCustomEvent​

属性​

contentId​

disabled​

maxEdgeStart​

menuId​

side​

swipeGesture​

type​

事件​

方法​

close​

isActive​

isOpen​

open​

setOpen​

toggle​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

基本用法

菜单切换

菜单类型

菜单端

多个菜单

主题化

CSS 阴影部分

接口

MenuCustomEvent

属性

contentId

disabled

maxEdgeStart

menuId

side

swipeGesture

type

事件

方法

close

isActive

isOpen

open

setOpen

toggle

CSS 阴影部分

CSS 自定义属性

插槽