SpeedDial is a floating button with a popup menu.
import { SpeedDialModule } from 'primeng/speeddial';
SpeedDial items are defined with the model property based on MenuModel API. Default orientation of the items is linear and direction property is used to define the position of the items related to the button.
<p-speedDial [model]="items" direction="up"></p-speedDial>
<p-speedDial [model]="items" direction="down"></p-speedDial>
<p-speedDial [model]="items" direction="left"></p-speedDial>
<p-speedDial [model]="items" direction="right"></p-speedDial>
Items can be displayed around the button when type is set to circle. Additional radius property defines the radius of the circle.
<p-speedDial [model]="items" type="circle" [radius]="80" buttonClassName="p-button-warning"></p-speedDial>
When type is defined as semi-circle, items are displayed in a half-circle around the button.
<p-speedDial [model]="items" direction="up" [radius]="80" type="semi-circle"></p-speedDial>
<p-speedDial [model]="items" direction="down" [radius]="80" type="semi-circle"></p-speedDial>
<p-speedDial [model]="items" direction="left" [radius]="80" type="semi-circle"></p-speedDial>
<p-speedDial [model]="items" direction="right" [radius]="80" type="semi-circle"></p-speedDial>
When type is defined as quarter-circle, items are displayed in a half-circle around the button.
<p-speedDial [model]="items" radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
<p-speedDial [model]="items" radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
<p-speedDial [model]="items" radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
<p-speedDial [model]="items" radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
Items display a tooltip on hober when a standalone Tooltip is present with a target that matches the items.
<p-speedDial [model]="leftTooltipItems" className="speeddial-right" direction="up"></p-speedDial>
<p-speedDial [model]="tooltipItems" className="speeddial-left" direction="up"></p-speedDial>
Adding mask property displays a modal layer behind the popup items.
<p-speedDial [model]="items" direction="up" [mask]="true"></p-speedDial>
SpeedDial sample with an outlined button, custom icons and transitionDelay.
<p-speedDial [model]="items" direction="up" transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined"></p-speedDial>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-speeddial | Container element. |
| p-speed-dial-button | Button element of speeddial. |
| p-speed-dial-mask | Mask element of speeddial. |
| p-speed-dial-list | List of the actions. |
| p-speed-dial-item | Each action item of list. |
SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button.
The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button.
<p-speedDial aria-label="Options"></p-speedDial>
| Key | Function |
|---|---|
| enter | Toggles the visibility of the menu. |
| space | Toggles the visibility of the menu. |
| down arrow | Opens the menu and moves focus to the first item. |
| up arrow | Opens the menu and moves focus to the last item. |
| Key | Function |
|---|---|
| enter | Actives the menuitem, closes the menu and sets focus on the menu button. |
| escape | Closes the menu and sets focus on the menu button. |
| arrow keys | Navigates between the menu items. |
| home | Moves focus to the first item. |
| end | Moves focus to the last item. |
API defines helper props, events and others for the PrimeNG Speed Dial module.
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | null | Unique identifier of the element. |
| model | object | null | MenuModel instance to define the action items. |
| visible | boolean | false | Specifies the visibility of the overlay. |
| className | string | null | Style class of the element. |
| style | object | null | Inline style of the element. |
| 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. |
| buttonClassName | string | null | Style class of the button element. |
| buttonStyle | object | null | Inline style of the button element. |
| buttonTemplate | any | null | Template of button element. |
| maskClassName | string | null | Style class of the mask element. |
| maskStyle | object | null | Inline style of the mask element. |
| showIcon | string | null | 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. |
| Name | Parameters |
|---|---|
| button | - |
| Name | Parameters | Description |
|---|---|---|
| onVisibleChange | visible: Whether the actions are visible. | Fired when the visibility of element changed. |
| onClick | event: Browser event. | Fired when the button element clicked. |
| onShow | - | Fired when the actions are visible. |
| onHide | - | Fired when the actions are hidden. |