面板菜单

PanelMenu 是手风琴-树组件的混合体。

导入#


import { PanelMenu } from 'primereact/panelmenu';
         

基本#

PanelMenu 需要一个菜单项集合作为其模型。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

多个#

默认情况下，只有一个根菜单项可以处于活动状态，启用 multiple 属性以能够打开多个项。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

受控#

如果菜单项定义了 key，则可以使用 expandedKeys 属性以编程方式控制 PanelMenu 状态，该属性定义了展开的键。 此属性是 Map 实例，其键是节点的键，值是布尔值。


<div className="card flex flex-column align-items-center gap-3">
    <Button type="button" label="Toggle All" text onClick={() => toggleAll()} />
    <PanelMenu model={items} expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys} className="w-full md:w-20rem" multiple />
</div>  
 

模板#

PanelMenu 提供项目自定义功能，使用接收项目实例并返回元素的 items template 属性。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

命令#

command 属性定义了当通过单击或按键事件激活项目时要运行的回调。


<PanelMenu model={items} className="w-full md:w-20rem" />   
<Toast ref={toast} />
 

路由器#

带有导航的项目使用 command 和 url 属性定义，以便能够使用路由器链接组件、外部链接或编程导航。


<PanelMenu model={items} className="w-full md:w-20rem" />   
 

可访问性#

屏幕阅读器

手风琴标题元素具有 button 角色，一个使用菜单项模型的 label 属性定义的 aria-label 和 aria-controls 来定义内容部分的 id，以及 aria-expanded用于可见性状态。

手风琴面板的内容使用 region 角色，定义一个与标题的 aria-controls 匹配的 id 和一个引用标题 id 的 aria-labelledby。

树元素具有 tree 作为角色，每个菜单项都具有 treeitem 角色以及 aria-label、aria-selected 和 aria-expanded 属性。 树节点的容器元素具有 group 角色。 aria-setsize、aria-posinset 和 aria-level 属性是隐式计算的，并添加到每个 treeitem 中。

标题键盘支持

键功能
tab当焦点移动到组件时，将焦点添加到第一个标题，如果已经有一个处于焦点的标签标题，则基于页面标签序列将焦点移出组件。
enter切换内容的可见性。
space切换内容的可见性。
向下箭头如果面板折叠，则将焦点移动到下一个标题，否则面板的第一个树节点接收焦点。
向上箭头如果上一个面板折叠，则将焦点移动到上一个标题，否则上一个面板的最后一个树节点接收焦点。
home将焦点移动到第一个标题。
end将焦点移动到最后一个标题。

树形键盘支持

键功能
tab将焦点移动到页面标签顺序中的下一个可聚焦元素。
shift + tab将焦点移动到页面标签顺序中的上一个可聚焦元素。
enter激活处于焦点的树节点。
space激活处于焦点的树节点。
向下箭头将焦点移动到下一个树节点。
向上箭头将焦点移动到上一个树节点。
右箭头如果节点已关闭，则打开节点，否则将焦点移动到第一个子节点。
左箭头如果节点已打开，则关闭节点，否则将焦点移动到父节点。
                  PrimeReact 10.9.1，由 PrimeTek 提供