npm i @velkin/react
import { VuSpeeddial } from "@velkin/react/speeddial";| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the action cluster is open. |
| direction | VuSpeeddialDirection | "top" | Preferred expansion side before viewport flip. |
| color | VuSpeeddialColor | "primary" | FAB intent color; defaults to `"primary"`. |
| size | VuSpeeddialSize | "md" | FAB and action hit-target scale. |
| icon | string | "ion:add" | Iconify name for the FAB icon when closed. |
| iconOpen | string | "ion:close" | Iconify name when open (defaults to `ion:close`). |
| label | string | "" | Accessible name for the FAB (required when icon-only). |
| closeOnEsc | boolean | true | Whether Escape closes the open cluster. |
| closeOnOutside | boolean | true | Whether pointer-down outside closes the open cluster. |
| Event | Detail | Description |
|---|---|---|
| vu-open | CustomEvent<void> | When the cluster begins opening. |
| vu-close | CustomEvent<void> | When the cluster begins closing. |
| vu-open-change | VuSpeeddialOpenChangeDetail | When `open` changes. |
| Slot | Description |
|---|---|
| — | - Action buttons (`<button>` or `<vu-button>`) shown when open. |
| Part | Description |
|---|---|
| root | Positioning wrapper around the FAB and action cluster. |
| fab | Native toggle button for the speed dial. |
| actions | Container for slotted action buttons. |
| Method | Description |
|---|---|
| show | - Opens the speed dial when actions are slotted. |
| hide | - Closes the speed dial. |
| toggle | - Toggles the speed dial. |
| Name | Definition |
|---|---|
| VuSpeeddialColor | |
| VuSpeeddialDirection | |
| VuSpeeddialOpenChangeDetail | |
| VuSpeeddialSize | |