Fieldset 是一个分组组件,具有内容切换功能。
import Fieldset from 'primevue/fieldset';
一个简单的 Fieldset 可以使用 legend 属性以及作为子元素的 content 创建。
<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 元素。当启用可切换选项时,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 | 切换内容的可见性。 |