TabMenu

TabMenuは、メニュー項目をタブヘッダーとして表示するナビゲーションコンポーネントです。

インポート#


import { TabMenu } from 'primereact/tabmenu';

基本#

Stepsには、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ロールがあり、アンカー要素には、項目のラベルを参照するaria-labelと、項目が無効になっている場合はaria-disabledが定義されたmenuitemロールがあります。

キーボードサポート

キー	機能
tab	フォーカスがコンポーネントに移動すると、アクティブなタブヘッダーにフォーカスを追加します。すでにフォーカスされているタブヘッダーがある場合は、ページのタブシーケンスに基づいてフォーカスをコンポーネントの外に移動します。
enter	フォーカスされたタブヘッダーをアクティブにします。
space	フォーカスされたタブヘッダーをアクティブにします。
右矢印	フォーカスを次のヘッダーに移動します。
左矢印	フォーカスを前のヘッダーに移動します。
home	フォーカスを最初のヘッダーに移動します。
end	フォーカスを最後のヘッダーに移動します。