分层菜单

分层菜单在嵌套的覆盖层中显示子菜单。

导入#


import { TieredMenu } from 'primereact/tieredmenu';

基本#

分层菜单需要菜单项的集合作为其模型。


<TieredMenu model={items} breakpoint="767px" />

弹出框#

通过添加 popup 属性并使用目标事件调用 toggle 方法来启用弹出模式。


<TieredMenu model={items} popup ref={menu} breakpoint="767px" />
<Button label="Show" onClick={(e) => menu.current.toggle(e)} />

模板#

分层菜单通过接收项目实例并返回元素的项目的 template 属性提供项目自定义。


<TieredMenu model={items} breakpoint="767px" />

命令#

command 属性定义当项目通过单击或按键事件激活时要运行的回调。


<Toast ref={toast} />
<TieredMenu model={items} breakpoint="767px" />

路由器#

具有导航功能的项目使用 command 和 url 属性定义，以便能够使用路由器链接组件、外部链接或编程导航。


<TieredMenu model={items} breakpoint="767px" />

辅助功能#

屏幕阅读器

分层菜单组件使用设置为“垂直”的 aria-orientation 的 menubar 角色，并且可以使用 aria-labelledby 或 aria-label 属性提供描述菜单的值。每个列表项都有一个 presentation 角色，而锚元素具有一个 menuitem 角色，其中 aria-label 指的是项目的标签，如果该项目被禁用，则定义 aria-disabled。分层菜单中的子菜单使用 menu 角色，并将 aria-labelledby 定义为子菜单根菜单项标签的 ID。此外，打开子菜单的菜单项具有 aria-haspopup、aria-expanded 和 aria-controls 来定义项目和子菜单之间的关系。

在弹出模式下，该组件隐式管理目标元素的 aria-expanded、aria-haspopup 和 aria-controls 属性，以定义目标和弹出框之间的关系。

键盘支持

按键	功能
tab	如果焦点移入菜单，则将焦点添加到第一个项目。如果焦点已在菜单中，则焦点移动到页面选项卡序列中的下一个可聚焦项目。
shift + tab	如果焦点移入菜单，则将焦点添加到最后一个项目。如果焦点已在菜单中，则焦点移动到页面选项卡序列中的上一个可聚焦项目。
enter	如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
空格键	如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
escape	如果焦点位于弹出子菜单中，则关闭子菜单并将焦点移动到已关闭子菜单的根项目。
向下箭头	将焦点移动到子菜单中的下一个菜单项。
向上箭头	将焦点移动到子菜单中的上一个菜单项。
向右箭头	如果存在子菜单，则打开子菜单并将焦点移动到第一个项目。
向左箭头	关闭子菜单并将焦点移动到已关闭子菜单的根项目。
home	将焦点移动到子菜单中的第一个菜单项。
end	将焦点移动到子菜单中的最后一个菜单项。
任何可打印字符	将焦点移动到标签以正在键入的字符开头的菜单项。