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".
如果应用中需要两侧菜单，则可以通过将 side 值传递给 MenuController 上的 open 方法来打开菜单。如果未提供一侧，则将打开 "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 而不是 side 来引用它们。否则，可能会激活错误的菜单。
¥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> |
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, role?: string) => 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 阴影部分
¥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
- iOS
- 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 |
| 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.