Fieldset は、コンテンツの開閉機能を備えたグループ化コンポーネントです。
import { Fieldset } from 'primereact/fieldset';
単純な Fieldset は、legend プロパティと子要素としてのコンテンツを使用して作成されます。
<Fieldset legend="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>
</Fieldset>
toggleable オプションが有効になっている場合、fieldset のコンテンツを展開および折りたたむことができます。 開閉可能な fieldset は、制御されたコンポーネントまたは制御されていないコンポーネントとして使用できます。 制御モードでは、コンテンツの状態を管理するために、collapsed プロパティへのバインディングと onToggle イベントが必要です。
<Fieldset legend="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>
</Fieldset>
凡例セクションは、プリミティブ値の代わりにカスタムコンテンツで定義することもできます。
<Fieldset legend={legendTemplate}>
<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>
</Fieldset>
Fieldset コンポーネントは、セマンティックな fieldset 要素を使用します。 toggleable オプションが有効になっている場合、button ロールを持つクリック可能な要素が legend 要素内に含まれ、このボタンには、コンテンツセクションの ID を定義する aria-controls と、表示状態の aria-expanded があります。 ボタンを読み取る値は、デフォルトで legend プロパティの値になり、aria-label または aria-labelledby を toggleButtonProps プロパティで定義することでカスタマイズできます。
コンテンツは region を使用し、コンテンツ切り替えボタンの aria-controls とヘッダーの ID を参照する aria-labelledby に一致する ID を定義します。
| キー | 機能 |
|---|---|
| tab | ページのタブシーケンスで、次にフォーカス可能な要素にフォーカスを移動します。 |
| shift + tab | ページのタブシーケンスで、前にフォーカス可能な要素にフォーカスを移動します。 |
| enter | コンテンツの表示を切り替えます。 |
| スペース | コンテンツの表示を切り替えます。 |