SpeedDialModel

1 Oct 20258 minutes to read

Interface for a class SpeedDial

Properties

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.

animation SpeedDialAnimationSettingsModel

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

    <button ejs-speeddial id="speeddial" openIconCss='e-icons e-menu' [items]='items' [animation]='animation'></button>
import { Component, ViewEncapsulation } from '@angular/core';
import { SpeedDialItemModel,SpeedDialAnimationSettingsModel } from '@syncfusion/ej2-angular-buttons';
/**
 * Default Speed Dial component
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public items: SpeedDialItemModel[] = [
      { text: 'Cut', iconCss: 'e-icons e-cut' },
      { text: 'Copy', iconCss: 'e-icons e-copy' },
      { text: 'Paste', iconCss: 'e-icons e-paste' }
    ];
    public animation: SpeedDialAnimationSettingsModel = { effect: 'Zoom' };
}

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.

content string

Defines the content for the button of SpeedDial.

cssClass string

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

direction string|LinearDirection

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

  • Up
  • Down
  • Left
  • Right
  • Auto

disabled boolean

Defines whether to enable or disable the SpeedDial.

enablePersistence boolean

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

enableRtl boolean

Enable or disable rendering component in right to left direction.

iconPosition string|IconPosition

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

  • Left
  • Right

isPrimary boolean

Specifies whether the SpeedDial acts as the primary.

itemTemplate string|object

Defines the template content for the speed dial item.

    <button ejs-speeddial id="speeddial" openIconCss='e-icons e-menu' [items]='items' [itemTemplate]="itemTemplate">
        <ng-template #itemTemplate let-items="">
            <div class="itemlist">
                <span class="icon {{items.iconCss}}" style="padding:3px"></span>
                <span class="text">{{items.text}}</span>
            </div>
    </ng-template>
    </button>
import { Component, ViewEncapsulation } from '@angular/core';
import { SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';
/**
 * Default Speed Dial component
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
     public items: SpeedDialItemModel[] = [
    { text:'Cut', iconCss:'e-icons e-cut'},
    { text:'Copy', iconCss:'e-icons e-copy'},
    { text:'Paste', iconCss:'e-icons e-paste'}
  ];
}

items SpeedDialItemModel[]

Defines the list of SpeedDial items.

locale string

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

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.

mode string|SpeedDialMode

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

  • Linear
  • Radial
   <button ejs-speeddial id="speeddial" openIconCss='e-icons e-menu' [items]='items' mode='Radial'></button>
import { Component, ViewEncapsulation } from '@angular/core';
import { SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';
/**
 * Default Speed Dial component
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public items: SpeedDialItemModel[] = [
      { iconCss: 'e-icons e-cut' },
      { iconCss: 'e-icons e-copy' },
      { iconCss: 'e-icons e-paste' }
    ];
}

openIconCss string

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

opensOnHover boolean

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

popupTemplate string|object

Defines a template content for popup of SpeedDial.

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.

radialSettings RadialSettingsModel

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

   <button ejs-speeddial id="speeddial" openIconCss='e-icons e-menu' [items]='items' mode='Radial' [radialSettings]='radialSettings'></button>
import { Component, ViewEncapsulation } from '@angular/core';
import { SpeedDialItemModel,RadialSettingsModel } from '@syncfusion/ej2-angular-buttons';
/**
 * Default Speed Dial component
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public items: SpeedDialItemModel[] = [
      { iconCss: 'e-icons e-cut' },
      { iconCss: 'e-icons e-copy' },
      { iconCss: 'e-icons e-paste' }
    ];
    public radialSettings: RadialSettingsModel = { offset: '80px', direction: 'AntiClockwise', startAngle: 190, endAngle: 260 };
}

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.

visible boolean

Defines whether the SpeedDial is visible or hidden.