标签菜单

TabMenu 是一个导航组件，它将菜单项显示为选项卡标题。

导入#


import { TabMenu } from 'primereact/tabmenu';

基本用法#

步骤需要一个菜单项集合作为其model。


<TabMenu model={items} />

受控模式#

在受控模式下，需要绑定到 activeIndex 属性以及 onTabChange 事件来管理活动项。


<Button onClick={() => setActiveIndex(0)} className="p-button-outlined mb-5" label="Activate 1st" />
<TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />

模板#

TabMenu 通过接收项实例并返回元素的项的 template 属性提供项自定义。


<TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />

命令#

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


<Toast ref={toast} />
<TabMenu model={items} />

路由#

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


<TabMenu model={items} />

无障碍#

屏幕阅读器

TabMenu 组件使用 menubar 角色，并且用于描述菜单的值可以使用 aria-labelledby 或 aria-label 属性提供。每个列表项都有一个 presentation 角色，而锚元素具有 menuitem 角色，aria-label 引用该项的标签，如果该项被禁用则定义 aria-disabled。

键盘支持

按键	功能
tab	当焦点移入组件时，将焦点添加到活动的选项卡标题，如果已经有一个有焦点的选项卡标题，则根据页面选项卡顺序将焦点移出组件。
enter	激活有焦点的选项卡标题。
空格键	激活有焦点的选项卡标题。
右箭头	将焦点移到下一个标题。
左箭头	将焦点移到上一个标题。
home	将焦点移到第一个标题。
end	将焦点移到最后一个标题。