SpeedDial

23 Sep 202510 minutes to read

The SpeedDial component that appears in front of all the contents of the page and displays list of action buttons on click which is an extended version of FAB.
The button of speed dial is positioned in relative to a view port of browser or the .
It can display a menu of related actions or a custom content popupTemplate>.

Properties

animation SpeedDialAnimationSettingsModel

Provides options to customize the animation applied while opening and closing the popup of speed dial

    <button id='speeddial'></button>

import { SpeedDial, SpeedDialItemModel, SpeedDialAnimationSettings } from '@syncfusion/ej2-buttons';

let items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
];

let animationSettings: SpeedDialAnimationSettings = { effect: 'Zoom', duration: 400, delay: 10 };

let speeddial: SpeedDial  = new SpeedDial ({
    openIconCss: 'e-icons e-edit',
    closeIconCss: 'e-icons e-close',
    items: items,
    animation: animationSettings
});

speeddial.appendTo('#speeddial');

Defaults to { effect: ‘Fade’, duration: 400, delay: 0 }

closeIconCss string

Defines one or more CSS classes to include an icon or image to denote the speed dial is opened and displaying menu items.

Defaults to ’’

content string

Defines the content for the button of SpeedDial.

Defaults to ’’

cssClass string

Defines one or more CSS classes to customize the appearance of SpeedDial.

Defaults to ’’

direction string|LinearDirection

Defines the speed dial item display direction when mode is linear .
The possible values are

Up
Down
Left
Right
Auto

Defaults to LinearDirection.Auto

disabled boolean

Defines whether to enable or disable the SpeedDial.

Defaults to false.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

iconPosition string|IconPosition

Defines the position of icon in the button of speed dial.
The possible values are:

Left
Right

Defaults to IconPosition.Left

isPrimary boolean

Specifies whether the SpeedDial acts as the primary.

Defaults to true

itemTemplate string|Function

Defines the template content for the speed dial item.

    <button id='speeddial'></button>

    <script type='text/x-jsrender' id='itemTemplate'>
        <div class='itemlist'>
            <span class='icon ${iconCss}'></span>
            <span class='text'>${text}</span>
        </div>
    </script>

import { SpeedDial, SpeedDialItemModel } from '@syncfusion/ej2-buttons';

let items: SpeedDialItemModel[] = [
    { text:'Cut', iconCss:'e-icons e-cut'},
    { text:'Copy', iconCss:'e-icons e-copy'},
    { text:'Paste', iconCss:'e-icons e-paste'}
];

let speeddial: SpeedDial  = new SpeedDial ({
    openIconCss:'e-icons e-edit',
    itemTemplate: '#itemTemplate',
    items:items
});

speeddial.appendTo('#speeddial');

Defaults to ’’

items SpeedDialItemModel[]

Defines the list of SpeedDial items.

Defaults to []

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

Defines whether the speed dial popup can be displayed as modal or modal less.
When enabled, the Speed dial creates an overlay that disables interaction with other elements other than speed dial items.
If user clicks anywhere other than speed dial items then popup will get closed.

Defaults to false.

mode string|SpeedDialMode

Defines the display mode of speed dial action items.
The possible values are:

Linear
Radial

    <button id='speeddial'></button>

import { SpeedDial, SpeedDialItemModel } from '@syncfusion/ej2-buttons';

let items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
];

let speeddial: SpeedDial  = new SpeedDial ({
    openIconCss:'e-icons e-edit',
    mode:'Radial',
    items: items
});

speeddial.appendTo('#speeddial');

Defaults to SpeedDialMode.Linear

openIconCss string

Defines one or more CSS classes to include an icon or image for the button of SpeedDial when it’s closed.

Defaults to ’’

opensOnHover boolean

Defines whether to open the popup when the button of SpeedDial is hovered.
By default, SpeedDial opens popup on click action.

Defaults to false

popupTemplate string|Function

Defines a template content for popup of SpeedDial.

Defaults to ’’

position string|FabPosition

Defines the position of the button of Speed Dial relative to target.
Defines the position of the FAB relative to target.
The possible values are:

TopLeft: Positions the FAB at the target’s top left corner.
TopCenter: Positions the FAB at the target’s top left corner.
TopRight: Positions the FAB at the target’s top left corner.
MiddleLeft: Positions the FAB at the target’s top left corner.
MiddleCenter: Positions the FAB at the target’s top left corner.
MiddleRight: Positions the FAB at the target’s top left corner.
BottomLeft: Positions the FAB at the target’s top left corner.
BottomCenter: Places the FAB on the bottom-center position of the target.
BottomRight: Positions the FAB at the target’s bottom right corner.
To refresh the position of FAB on target resize, use refreshPosition method.
The position will be refreshed automatically when browser resized.

Defaults to FabPosition.BottomRight

radialSettings RadialSettingsModel

Provides the options to customize the speed dial action buttons when mode of speed dial is radial

    <button id='speeddial'></button>

import { SpeedDial, SpeedDialItemModel, RadialSettingsModel  } from '@syncfusion/ej2-buttons';

let items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
];

let radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', offset:'80px', startAngle:190, endAngle:260 };

let speeddial: SpeedDial  = new SpeedDial ({
    openIconCss:'e-icons e-edit',
    mode:'Radial',
    position:'MiddleCenter',
    radialSettings: radialSettings,
    items: items
});

speeddial.appendTo('#speeddial');

Defaults to { startAngle: null, endAngle: null, direction: ‘Auto’ }

target string|HTMLElement

Defines the selector that points to the element in which the button of SpeedDial will be positioned.
By default button is positioned based on viewport of browser.
The target element must have relative position, else Button will get positioned based on the closest element which has relative position.

Defaults to ’’

visible boolean

Defines whether the SpeedDial is visible or hidden.

Defaults to true.

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hide

Closes the SpeedDial popup.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshPosition

Refreshes the button position of speed dial. You can call this method to re-position button when the target is resized.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

Returns void

show

Opens the SpeedDial popup to display to display the speed dial items or the popupTemplate.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	`Function[]`	?

Returns void

Events

beforeClose EmitType<SpeedDialBeforeOpenCloseEventArgs>

Event callback that is raised before the speed dial popup is closed.

beforeItemRender EmitType<SpeedDialItemEventArgs>

Event callback that is raised before rendering the speed dial item.

beforeOpen EmitType<SpeedDialBeforeOpenCloseEventArgs>

Event callback that is raised before the speed dial popup is opened.

clicked EmitType<SpeedDialItemEventArgs>

Event callback that is raised when a speed dial action item is clicked.

created EmitType<Event>

Event callback that is raised after rendering the speed dial.

onClose EmitType<SpeedDialOpenCloseEventArgs>

Event callback that is raised when the SpeedDial popup is closed.

onOpen EmitType<SpeedDialOpenCloseEventArgs>

Event callback that is raised when the SpeedDial popup is opened.

SpeedDial

Properties

animation SpeedDialAnimationSettingsModel

closeIconCss string

content string

cssClass string

direction string|LinearDirection

disabled boolean

enablePersistence boolean

enableRtl boolean

iconPosition string|IconPosition

isPrimary boolean

itemTemplate string|Function

items SpeedDialItemModel[]

locale string

modal boolean

mode string|SpeedDialMode

openIconCss string

opensOnHover boolean

popupTemplate string|Function

position string|FabPosition

radialSettings RadialSettingsModel

target string|HTMLElement

visible boolean

Methods

addEventListener

appendTo

attachUnloadEvent

dataBind

detachUnloadEvent

getLocalData

getRootElement

handleUnload

hide

refresh

refreshPosition

removeEventListener

show

Inject

Events

beforeClose EmitType<SpeedDialBeforeOpenCloseEventArgs>

beforeItemRender EmitType<SpeedDialItemEventArgs>

beforeOpen EmitType<SpeedDialBeforeOpenCloseEventArgs>

clicked EmitType<SpeedDialItemEventArgs>

created EmitType<Event>

onClose EmitType<SpeedDialOpenCloseEventArgs>

onOpen EmitType<SpeedDialOpenCloseEventArgs>