Adorn

Appearance

Menu 导航菜单 ​

为页面和功能提供导航的菜单列表。

何时使用 ​

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

开发者注意事项 ​

Menu元素为ul，因而仅支持li以及script-supporting子元素。因而你的子节点元素应该都在Menu.Item内使用。

顶部导航 ​

水平的顶部导航菜单。

顶部导航滚动 ​

水平的顶部导航菜单如果太多将出现可滚动的图标，可通过scrollGap属性来指定一次滚动几个菜单长度。

内嵌菜单 ​

垂直菜单，子菜单内嵌在菜单区域。

多级嵌套菜单 ​

多级嵌套菜单。

Props 属性 ​

属性说明类型默认值版本
active菜单项keystring-
defaultOpenKeys初始展开的SubMenu菜单项key数组string[]-
defaultActive初始选中的菜单项keystring-
items菜单内容MenuItem[]-
mode菜单类型，现在支持垂直、水平、和内嵌模式三种vertical | horizontal | inlinevertical
openKeys当前展开的SubMenu菜单项key数组string[]-
triggerSubMenuActionSubMenu展开/关闭的触发行为hover | clickhover
ts
export interface MenuItem  {
  danger?: boolean
  disabled?: boolean
  icon?: IconName
  key: string
  label?: string
  title?: string
  children?: MenuItem[]
}
export interface MenuItem  {
  danger?: boolean
  disabled?: boolean
  icon?: IconName
  key: string
  label?: string
  title?: string
  children?: MenuItem[]
}

Events 事件 ​

事件说明类型
click点击事件(e: CustomEvent<string>) => void
openChangeSubMenu开/关闭的回调(e: CustomEvent<{ key: string; open: boolean }>) => void