Vitral 0.2
Botão

SpeedDial

Um botão flutuante que abre suas ações em leque, em linha ou ao redor de um círculo.

Testado com WAI-ARIA

Importação

main.ts
import { SpeedDial } from '@vitral/vue';

Linear

Last action: —
<script setup lang="ts">import { SpeedDial, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const actions: MenuItem[] = [    { label: 'Add', icon: 'plus', command: () => (last.value = 'Add') },    { label: 'Edit', icon: 'pencil', command: () => (last.value = 'Edit') },    { label: 'Copy', icon: 'copy', command: () => (last.value = 'Copy') },    { label: 'Delete', icon: 'trash', command: () => (last.value = 'Delete') }];</script> <template>    <div style="display: flex; gap: 6rem; align-items: center; padding: 11rem 8rem 1rem">        <SpeedDial :model="actions" direction="up" aria-label="Actions (up)" />        <SpeedDial :model="actions" direction="right" aria-label="Actions (right)" severity="secondary" />    </div>    <small style="color: var(--vt-text-muted-color)">Last action: {{ last }}</small></template>

Círculo e semicírculo

<script setup lang="ts">import { SpeedDial, type MenuItem } from '@vitral/vue'; const actions: MenuItem[] = [    { label: 'Add', icon: 'plus' },    { label: 'Edit', icon: 'pencil' },    { label: 'Copy', icon: 'copy' },    { label: 'Delete', icon: 'trash' }];</script> <template>    <div style="display: flex; gap: 12rem; align-items: center; padding: 6rem 7rem">        <SpeedDial :model="actions" type="circle" :radius="80" aria-label="Actions (circle)" severity="help" />        <SpeedDial :model="actions" type="semi-circle" direction="up" :radius="90" hide-icon="close" aria-label="Actions (semi-circle)" severity="success" />    </div></template>

Quarto de círculo

<script setup lang="ts">import { SpeedDial, type MenuItem } from '@vitral/vue'; const actions: MenuItem[] = [    { label: 'Add', icon: 'plus' },    { label: 'Edit', icon: 'pencil' },    { label: 'Copy', icon: 'copy' },    { label: 'Delete', icon: 'trash' }];</script> <template>    <div style="display: flex; justify-content: flex-end; width: 100%; padding: 7rem 1rem 1rem">        <SpeedDial :model="actions" type="quarter-circle" direction="up-left" :radius="110" aria-label="Actions (quarter)" severity="contrast" />    </div></template>

API

Lido de packages/vue/src/components/SpeedDial/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
modelMenuItem[]As ações; o `label` de cada item dá nome ao seu botão e aparece como tooltip.
directionSpeedDialDirectionPara onde as ações abrem. O padrão é `'up'`.
type'linear' | 'circle' | 'semi-circle' | 'quarter-circle'Uma linha (o padrão), ou em volta de um círculo, de meio ou de um quarto de círculo.
radiusnumberO raio do círculo em pixels. O padrão é 20 por ação.
showIconIconPropO ícone do botão enquanto fechado. O padrão é um mais.
hideIconIconPropO ícone do botão enquanto aberto. Sem ele, o ícone de mostrar gira.
rotateAnimationbooleanGira o ícone ao abrir. O padrão é true.
maskbooleanEscurece a página atrás das ações abertas.
transitionDelaynumberMilissegundos entre o surgimento de uma ação e o da próxima. O padrão é 30.
hideOnClickOutsidebooleanFecha com um clique fora. O padrão é true.
ariaLabelstringDá nome ao botão.
severitySeverity—
disabledboolean—
tooltipPlacement'top' | 'bottom' | 'left' | 'right'Onde aparecem os tooltips das ações. O padrão é o lado oposto à direção.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
show——
hide——
clickevent: MouseEvent—

Slots

NomeProps do slotDescrição
item(props: { item: MenuItem; index: number })O conteúdo de uma ação.
icon(props: { visible: boolean })O ícone do botão.