TabMenu

TabMenu 是一個導航元件，會將選單項目顯示為分頁標頭。

匯入#


import { TabMenu } from 'primereact/tabmenu';

基本#

Steps 需要一個選單項目的集合作為其模型。


<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 提供使用項目範本屬性的項目自訂，該屬性會接收項目實例並傳回一個元素。


<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	將焦點移到最後一個標頭。