选项卡菜单

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

导入#


import { TabMenu } from 'primereact/tabmenu';

基本#

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


<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 通过 items 的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	激活焦点选项卡标题。
space	激活焦点选项卡标题。
右箭头	将焦点移动到下一个标题。
左箭头	将焦点移动到上一个标题。
home	将焦点移动到第一个标题。
end	将焦点移动到最后一个标题。