ion-menu
菜单组件是一种导航抽屉，从当前视图的侧面滑入。默认情况下，它使用起始侧（start side），在 LTR 方向中从左侧滑入，在 RTL 方向中从右侧滑入，但可以覆盖此侧设置。菜单会根据模式（mode）进行不同的显示，但显示类型可以更改为任何可用的菜单类型。
菜单元素应与根内容元素是同级关系。可以有任意数量的菜单附加到内容上。这些菜单可以从模板中进行控制，也可以通过 MenuController 以编程方式控制。
基本用法
菜单切换
菜单切换组件可用于创建自定义按钮来打开或关闭菜单。
菜单类型
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
| 说明 | 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 |
| 类型 | "overlay" ｜ "push" ｜ "reveal" ｜ 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, role?: string) => Promise<boolean> |
| 参数 | 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
| 说明 | 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. |
| 签名 | 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> |
| 参数 | animated: If true, the menu will animate when opening. If false, the menu will open instantly without animation. Defaults to true. |
setOpen
| 说明 | Opens or closes the menu. If the operation can't be completed successfully, it returns false. |
| 签名 | setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean> |
| 参数 | 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
| 说明 | 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> |
| 参数 | 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 | 说明 |
|---|---|
backdrop | The backdrop that appears over the main content when the menu is open. |
container | The container for the menu content. |
CSS 自定义属性
- iOS
- MD
| 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 |
| 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 |
插槽
该组件没有可用的插槽。