速度拨号

按下时，浮动操作按钮可以显示页面上可以执行的多个主要操作。

导入 #


import SpeedDial from 'primevue/speeddial';

线性 #

SpeedDial 项目基于 MenuModel API 使用 model 属性定义。项目的默认方向是线性，direction 属性用于定义项目相对于按钮的位置。


<SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
<SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
<SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
<SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />

圆形 #

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


<SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />

半圆形 #

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


<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />

四分之一圆 #

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


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

工具提示 #

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


<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />

遮罩 #

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


<SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />

模板 #

SpeedDial 通过 item 模板提供项目自定义，该模板接收模型中的 menuitem 实例作为参数。按钮有自己的 button 模板，还提供了一个名为 icon 的额外插槽，用于嵌入默认按钮的图标内容。


<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
    <template #button="{ toggleCallback }">
        <Button outlined class="border" @click="toggleCallback">
            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="..." fill="var(--p-primary-color)" />
                <path d="..." fill="var(--p-text-color)" />
            </svg>
        </Button>
    </template>
    <template #item="{ item, toggleCallback }">
        <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
            <span :class="item.icon" />
            <span>
                {{ item.label }}
            </span>
        </div>
    </template>
</SpeedDial>

可访问性 #

屏幕阅读器

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

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


<SpeedDial aria-label="Options" />

菜单按钮键盘支持

按键	功能
enter	切换菜单的可见性。
空格	切换菜单的可见性。
向下箭头	打开菜单并将焦点移动到第一个项目。
向上箭头	打开菜单并将焦点移动到最后一个项目。
向右箭头	打开菜单并将焦点移动到最后一个项目。
向左箭头	打开菜单并将焦点移动到第一个项目。
escape	关闭菜单。

菜单键盘支持

按键	功能
enter	激活菜单项，关闭菜单并将焦点设置在菜单按钮上。
空格	激活菜单项，关闭菜单并将焦点设置在菜单按钮上。
escape	关闭菜单并将焦点设置在菜单按钮上。
箭头键	在菜单项之间导航。
home	将焦点移动到第一个项目。
end	将焦点移动到最后一个项目。