Fieldset 是一個具有內容切換功能的分組元件。
import Fieldset from 'primevue/fieldset';
一個簡單的 Fieldset 可以使用 legend 屬性以及作為子元素的內容來建立。
<Fieldset legend="Header">
<p class="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 legend="Header" :toggleable="true">
<p class="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>
可以使用樣板客製化 Legend 區段的內容。
<Fieldset>
<template #legend>
<div class="flex items-center pl-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold p-2">Amy Elsner</span>
</div>
</template>
<p class="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 選項時，legend 元素內會包含一個按鈕元素，此按鈕具有 aria-controls 來定義內容區段的 id，並具有 aria-expanded 來表示可見性狀態。讀取按鈕的值預設為 legend 屬性的值，並且可以透過 toggleButtonProps 屬性定義 aria-label 或 aria-labelledby 來客製化。
內容使用 region，定義一個與內容切換按鈕的 aria-controls 相符的 id，並且 aria-labelledby 參照標頭的 id。
| 按鍵 | 功能 |
|---|---|
| tab | 將焦點移動到頁面 tab 順序中的下一個可聚焦元素。 |
| shift + tab | 將焦點移動到頁面 tab 順序中的上一個可聚焦元素。 |
| enter | 切換內容的可見性。 |
| space | 切換內容的可見性。 |