import SpeedDial from 'primevue/speeddial';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/speeddial/speeddial.min.js"></script>
When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the model property. SpeedDial's position is calculated according to the container element with the position type style.
<SpeedDial :model="items" />
items: [
{
label: 'Add',
icon: 'pi pi-pencil',
command: () => {
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
}
},
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
}
},
{
label: 'Delete',
icon: 'pi pi-trash',
command: () => {
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
}
},
{
label: 'Upload',
icon: 'pi pi-upload',
command: () => {
this.$router.push('fileupload');
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
}
]
SpeedDial uses the common MenuModel API to define the items, visit
SpeedDial has 4 types; linear, circle, semi-circle and quarter-circle.
Specifies the opening direction of actions. For the linear and semi-circle types; up, down, left and right. For the quarter-circle type; up-left, up-right, down-left and down-right.
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| model | object | null | MenuModel instance to define the action items. |
| visible | boolean | false | Specifies the visibility of the overlay. |
| direction | string | up | Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right' |
| transitionDelay | number | 30 | Transition delay step for each action item. |
| type | string | linear | Specifies the opening type of actions. |
| radius | number | 0 | Radius for *circle types. |
| mask | boolean | false | Whether to show a mask element behind the speeddial |
| disabled | boolean | false | Whether the component is disabled. |
| hideOnClickOutside | boolean | true | Whether the actions close when clicked outside. |
| buttonClass | string | null | Style class of the button element. |
| maskClass | string | null | Style class of the mask element. |
| maskStyle | object | null | Inline style of the mask element. |
| showIcon | string | pi pi-plus | Show icon of the button element. |
| hideIcon | string | null | Hide icon of the button element. |
| rotateAnimation | boolean | true | Defined to rotate showIcon when hideIcon is not present. |
| class | string | null | Style class of the element. |
| style | object | null | Inline style of the element. |
| tooltipOptions | object | null | Whether to display the tooltip on items. The modifiers of |
| Name | Parameters | Description |
|---|---|---|
| click | event: Browser event. | Fired when the button element clicked. |
| show | - | Fired when the actions are visible. |
| hide | - | Fired when the actions are hidden. |
| Name | Parameters |
|---|---|
| item | item: Custom template for item |
| button | toggle: toggle metadata |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-speeddial | Container element. |
| p-speeddial-button | Button element of speeddial. |
| p-speeddial-mask | Mask element of speeddial. |
| p-speeddial-list | List of the actions. |
| p-speeddial-item | Each action item of list. |
None.