速度拨号

速度拨号是一个带有弹出菜单的浮动按钮。

导入#


import { SpeedDial } from 'primereact/speeddial';

线性#

速度拨号项通过基于 MenuModel API 的 model 属性定义。项的默认方向是线性，direction 属性用于定义项相对于按钮的位置。


<Toast ref={toast} />
<SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
<SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
<SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
<SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />

圆形#

当 type 设置为 circle 时，项目可以显示在按钮周围。额外的 radius 属性定义了圆的半径。


<Toast ref={toast} />
<SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />

半圆#

当 type 定义为 semi-circle 时，项目会显示在按钮周围的半圆中。


<Toast ref={toast} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />

四分之一圆#

将 type 设置为 quarter-circle 会根据 direction 在按钮的四个角之一显示项目。


<Toast ref={toast} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="up-left" style={{ right: 0, bottom: 0 }} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="up-right" style={{ left: 0, bottom: 0 }} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="down-left" style={{ right: 0, top: 0 }} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="down-right" style={{ left: 0, top: 0 }} />

工具提示#

当存在与项目匹配目标的独立工具提示时，项目在悬停时会显示工具提示。


<Toast ref={toast} />
<Tooltip target=".speeddial-bottom-right .p-speeddial-action" position="left" />
<SpeedDial model={items} direction="up" className="speeddial-bottom-right right-0 bottom-0" buttonClassName="p-button-danger" />

<Tooltip target=".speeddial-bottom-left .p-speeddial-action" />
<SpeedDial model={items} direction="up" className="speeddial-bottom-left left-0 bottom-0" buttonClassName="p-button-help" />

遮罩#

添加 mask 属性会在弹出项后面显示一个模态层。


<Toast ref={toast} />
<SpeedDial mask model={items} radius={120} direction="up" style={{ right: 0, bottom: 0 }} />

自定义#

带有轮廓按钮、自定义图标和 transitionDelay 的速度拨号示例。


<Toast ref={toast} />
<SpeedDial model={items} direction="up" transitionDelay={80} showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />

辅助功能#

屏幕阅读器

速度拨号组件呈现一个原生按钮元素，该元素隐式包含任何传递的 prop。可以使用 aria-labelledby 或 aria-label props 定义描述按钮的文本。此外，该按钮还包括 aria-haspopup、aria-expanded 用于状态以及 aria-controls 以定义弹出窗口和按钮之间的关系。

弹出覆盖层在列表上使用 menu 角色，每个操作项都有一个 menuitem 角色，并带有作为菜单项标签的 aria-label。菜单的 id 指的是按钮的 aria-controls。


<SpeedDial aria-label="Options" />

菜单按钮键盘支持

键	功能
回车	切换菜单的可见性。
空格	切换菜单的可见性。
下箭头	打开菜单并将焦点移动到第一个项目。
上箭头	打开菜单并将焦点移动到最后一个项目。

菜单键盘支持

键	功能
回车	激活菜单项，关闭菜单并将焦点设置在菜单按钮上。
Esc	关闭菜单并将焦点设置在菜单按钮上。
箭头键	在菜单项之间导航。
Home	将焦点移动到第一个项目。
End	将焦点移动到最后一个项目。