面板
面板是一个分组组件，提供内容切换功能。
导入 #
import Panel from 'primevue/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 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>
</Panel>
可切换 #
面板的内容可以使用toggleable选项展开和折叠。
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 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>
</Panel>
模板 #
面板的头部、图标和页脚部分可以通过模板进行自定义。
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 toggleable>
<template #header>
<div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
<template #footer>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-2">
<Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div>
<span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
</div>
</template>
<template #icons>
<Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
<Menu ref="menu" id="config_menu" :model="items" popup />
</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>
</Panel>
可访问性 #
屏幕阅读器
可切换面板在头部使用内容切换按钮，该按钮具有aria-controls来定义内容部分的ID，以及aria-expanded来表示可见性状态。读取按钮的值默认为header属性的值，并且可以通过toggleButtonProps属性定义aria-label或aria-labelledby来自定义。
内容使用region，定义一个与内容切换按钮的aria-controls匹配的ID，以及指向头部的ID的aria-labelledby。
内容切换按钮键盘支持
| 按键 | 功能 |
|---|---|
| tab | 将焦点移动到页面标签顺序中的下一个可聚焦元素。 |
| shift + tab | 将焦点移动到页面标签顺序中的上一个可聚焦元素。 |
| enter | 切换内容的可见性。 |
| space | 切换内容的可见性。 |