面板
面板是一个容器组件，具有可选的内容切换功能。
导入#
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 事件来管理内容状态。
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>
模板#
标题部分使用 headerTemplate 属性进行自定义，该属性接受一个 PanelHeaderTemplateOptions 对象作为参数并返回内容。
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>
可访问性#
屏幕阅读器
可切换的面板在标题处使用内容切换按钮，该按钮具有 aria-controls 来定义内容部分的 ID，以及 aria-expanded 来表示可见性状态。读取按钮的值默认为 header 属性的值，并且可以通过定义 aria-label 或通过 toggleButtonProps 属性定义 aria-labelledby 来进行自定义。
内容使用 region，定义一个与内容切换按钮的 aria-controls 匹配的 ID，以及 aria-labelledby，它指向标题的 ID。
内容切换按钮键盘支持
| 键 | 功能 |
|---|---|
| tab | 将焦点移动到页面 tab 顺序中的下一个可聚焦元素。 |
| shift + tab | 将焦点移动到页面 tab 顺序中的上一个可聚焦元素。 |
| enter | 切换内容的可见性。 |
| space | 切换内容的可见性。 |