パネル
パネルは、オプションでコンテンツの切り替え機能を備えたコンテナーコンポーネントです。
インポート#
import { Panel } from 'primereact/panel';
基本#
シンプルなパネルは、headerプロパティと、子としてのコンテンツを使用して作成します。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<Panel header="Header">
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
切り替え可能#
パネルのコンテンツは、toggleableオプションが有効になっている場合、展開および折りたたむことができます。切り替え可能なパネルは、制御されたコンポーネントまたは制御されていないコンポーネントとして使用できます。制御されたモードでは、コンテンツの状態を管理するために、collapsedへのバインディングとonToggleイベントが必要です。property along with onToggle event are needed to manage the content state.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<Panel header="Header" toggleable>
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
テンプレート#
タイトルセクションは、PanelHeaderTemplateOptionsオブジェクトをパラメーターとして受け取り、コンテンツを返すheaderTemplateプロパティでカスタマイズされています。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<Panel headerTemplate={headerTemplate} footerTemplate={footerTemplate} toggleable>
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
アクセシビリティ#
スクリーンリーダー
切り替え可能なパネルは、コンテンツセクションのIDを定義するためにaria-controlsを持ち、表示状態のためにaria-expandedを持つヘッダーにコンテンツ切り替えボタンを使用します。ボタンを読み取る値は、デフォルトでheaderプロパティの値になり、toggleButtonPropsプロパティを介してaria-labelまたはaria-labelledbyを定義することでカスタマイズできます。
コンテンツはregionを使用し、コンテンツ切り替えボタンのaria-controlsと一致するID、およびヘッダーのIDを参照するaria-labelledbyを定義します。
コンテンツ切り替えボタンのキーボードサポート
| キー | 機能 |
|---|---|
| tab | フォーカスをページタブシーケンス内の次のフォーカス可能な要素に移動します。 |
| shift + tab | フォーカスをページタブシーケンス内の前のフォーカス可能な要素に移動します。 |
| enter | コンテンツの表示を切り替えます。 |
| space | コンテンツの表示を切り替えます。 |