跳至主要内容
版本：v8

ion-menu

阴影

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

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

基本用法​

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

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

菜单默认情况下显示在 "start" 侧。在使用从左到右方向的应用程序中，这是左侧，而在从右到左的应用程序中，这是右侧。菜单还可以设置为显示在 "end" 侧，即与 "start" 相反的一侧。

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

多个菜单​

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

主题​

CSS 阴影部分​

接口​

虽然不是必需的，但可以在 CustomEvent 接口处使用此接口，以便更强类型的 Ionic 事件从该组件发出。

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

属性​

contentId​

描述主内容的 id。使用路由器时，这通常是 ion-router-outlet。不使用路由器时，这通常是主视图的 ion-content。这不是 ion-menu 内部的 ion-content 的 ID。
属性content-id
类型string ｜ undefined
默认值undefined

disabled​

描述如果为 true，则菜单被禁用。
属性disabled
类型boolean
默认值false

maxEdgeStart​

描述拖动菜单打开的边缘阈值。如果拖动/滑动发生在该值之上，则不会触发菜单。
属性max-edge-start
类型number
默认值50
描述菜单的 ID。
属性menu-id
类型string ｜ undefined
默认值undefined

side​

描述菜单应放置在视图的哪一侧。
属性side
类型"end" ｜ "start"
默认值'start'

swipeGesture​

描述如果为 true，则启用滑动菜单。
属性swipe-gesture
类型boolean
默认值true

type​

描述菜单的显示类型。可用选项："overlay"、"reveal"、"push"。
属性type
类型"overlay" ｜ "push" ｜ "reveal" ｜ undefined
默认值undefined

事件​

名称描述冒泡
ionDidClose当菜单关闭时发出。true
ionDidOpen当菜单打开时发出。true
ionWillClose当菜单即将关闭时发出。true
ionWillOpen当菜单即将打开时发出。true

方法​

close​

描述关闭菜单。如果菜单已关闭或无法关闭，则返回 false。
签名close(animated?: boolean, role?: string) => Promise<boolean>

isActive​

描述如果菜单处于活动状态，则返回 true。

当菜单可以打开或关闭时，菜单处于活动状态，这意味着它已启用且不是 ion-split-pane 的一部分。
签名isActive() => Promise<boolean>

isOpen​

描述如果菜单已打开，则返回 true。
签名isOpen() => Promise<boolean>

open​

描述打开菜单。如果菜单已打开或无法打开，则返回 false。
签名open(animated?: boolean) => Promise<boolean>

setOpen​

描述打开或关闭按钮。如果操作无法成功完成，则返回 false。
签名setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>

toggle​

描述切换菜单。如果菜单已打开，它将尝试关闭，否则它将尝试打开它。如果操作无法成功完成，则返回 false。
签名toggle(animated?: boolean) => Promise<boolean>

CSS 阴影部分​

名称描述
backdrop菜单打开时出现在主内容上方的背景。
container菜单内容的容器。

CSS 自定义属性​

名称描述
--background菜单的背景
--height菜单的高度
--max-height菜单的最大高度
--max-width菜单的最大宽度
--min-height菜单的最小高度
--min-width菜单的最小宽度
--width菜单的宽度

插槽​

该组件没有可用的插槽。

内容

编辑此页面