PanelMenu

PanelMenuは、アコーディオンツリーコンポーネントのハイブリッドです。

インポート#


import { PanelMenu } from 'primereact/panelmenu';
         

基本#

PanelMenuには、モデルとしてメニュー項目のコレクションが必要です。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

複数#

デフォルトでは単一のルートメニュー項目のみをアクティブにできます。複数の項目を開くには、multipleプロパティを有効にします。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

制御#

メニュー項目にkeyが定義されている場合、PanelMenuの状態は、展開されているキーを定義するexpandedKeysプロパティを使用してプログラムで制御できます。このプロパティは、キーがノードのキーであり、値がブール値であるMapインスタンスです。


<div className="card flex flex-column align-items-center gap-3">
    <Button type="button" label="Toggle All" text onClick={() => toggleAll()} />
    <PanelMenu model={items} expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys} className="w-full md:w-20rem" multiple />
</div>  
 

テンプレート#

PanelMenuは、項目インスタンスを受け取り、要素を返す、項目のtemplateプロパティを使用して項目のカスタマイズを提供します。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

コマンド#

commandプロパティは、クリックまたはキーイベントによって項目がアクティブになったときに実行するコールバックを定義します。


<PanelMenu model={items} className="w-full md:w-20rem" />   
<Toast ref={toast} />
 

ルーター#

ナビゲーション付きの項目は、commandおよびurlプロパティで定義され、ルーターリンクコンポーネント、外部リンク、またはプログラムによるナビゲーションを使用できます。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

アクセシビリティ#

スクリーンリーダー

アコーディオンヘッダー要素には、buttonロール、メニュー項目モデルのlabelプロパティを使用して定義されたaria-label、およびコンテンツセクションのIDを定義するaria-controlsと、可視性の状態を表すaria-expandedがあります。。

アコーディオンパネルのコンテンツは、regionロールを使用し、ヘッダーのaria-controlsと一致するIDを定義し、ヘッダーのIDを参照するaria-labelledbyを定義します。

ツリー要素にはtreeがロールとしてあり、各メニュー項目にはtreeitemロールと、aria-label、aria-selected、およびaria-expanded属性があります。ツリーノードのコンテナ要素には、 groupロールがあります。aria-setsize、aria-posinset、およびaria-level属性は暗黙的に計算され、各treeitemに追加されます。

ヘッダーキーボードサポート

キー機能
tabフォーカスがコンポーネントに移動すると、最初のヘッダーにフォーカスを追加します。すでにフォーカスされているタブヘッダーがある場合は、ページのタブシーケンスに基づいてコンポーネントからフォーカスを移動します。
enterコンテンツの可視性を切り替えます。
spaceコンテンツの可視性を切り替えます。
下矢印パネルが折りたたまれている場合は、フォーカスを次のヘッダーに移動し、それ以外の場合は、パネルの最初のツリーノードがフォーカスを受け取ります。
上矢印前のパネルが折りたたまれている場合は、フォーカスを前のヘッダーに移動し、それ以外の場合は、前のパネルの最後のツリーノードがフォーカスを受け取ります。
homeフォーカスを最初のヘッダーに移動します。
endフォーカスを最後のヘッダーに移動します。

ツリーキーボードサポート

キー機能
tabフォーカスをページのタブ順序で次のフォーカス可能な要素に移動します。
shift + tabフォーカスをページのタブ順序で前のフォーカス可能な要素に移動します。
enterフォーカスされたツリーノードをアクティブにします。
spaceフォーカスされたツリーノードをアクティブにします。
下矢印フォーカスを次のツリーノードに移動します。
上矢印フォーカスを前のツリーノードに移動します。
右矢印ノードが閉じている場合は、ノードを開きます。それ以外の場合は、フォーカスを最初の子供ノードに移動します。
左矢印ノードが開いている場合は、ノードを閉じます。それ以外の場合は、フォーカスを親ノードに移動します。
                  PrimeReact 10.8.3 by PrimeTek