K
KoreUI

Speed Dial

UI

Botón de acción flotante (FAB) con menú expandible de acciones rápidas.

Uso básico

<x-kore::speed-dial :items="[
    ['icon' => 'edit', 'label' => 'Editar'],
    ['icon' => 'trash', 'label' => 'Eliminar'],
    ['icon' => 'share', 'label' => 'Compartir'],
]" />
<x-kore::speed-dial :items="[
    ['icon' => 'edit', 'label' => 'Editar'],
    ['icon' => 'trash', 'label' => 'Eliminar'],
    ['icon' => 'share', 'label' => 'Compartir'],
]" />

Direcciones

Controla la dirección de expansión del menú: up, down, left, right.

Up (default)
Down
Left
Right 
<x-kore::speed-dial direction="up" :items="$items" />
<x-kore::speed-dial direction="down" :items="$items" />
<x-kore::speed-dial direction="left" :items="$items" />
<x-kore::speed-dial direction="right" :items="$items" />
<x-kore::speed-dial direction="up" :items="$items" />
<x-kore::speed-dial direction="down" :items="$items" />
<x-kore::speed-dial direction="left" :items="$items" />
<x-kore::speed-dial direction="right" :items="$items" />

Posición fija

Posiciona el FAB en una esquina fija de la pantalla. En este ejemplo se simula dentro de un contenedor.

Posiciones: bottom-right, bottom-left, top-right, top-left

<x-kore::speed-dial position="bottom-right" :items="[
    ['icon' => 'edit', 'label' => 'Editar'],
    ['icon' => 'trash', 'label' => 'Eliminar'],
    ['icon' => 'share', 'label' => 'Compartir'],
]" />
<x-kore::speed-dial position="bottom-right" :items="[
    ['icon' => 'edit', 'label' => 'Editar'],
    ['icon' => 'trash', 'label' => 'Eliminar'],
    ['icon' => 'share', 'label' => 'Compartir'],
]" />

Props

Prop Tipo Default Descripción
icon string config(plus) Icono del FAB principal
direction string config(up) Dirección de expansión: up, down, left, right
position string|null null Posición fija: bottom-right, bottom-left, top-right, top-left
items array [] Acciones del menú
color string primary Color del FAB: primary, secondary, destructive
size string md Tamaño: sm, md, lg