Display modes in EJ2 TypeScript Speed dial control

10 May 20234 minutes to read

The action items in JavaScript Speed Dial can be displayed in Linear and Radial display modes by setting mode property.

Linear display mode

In Linear display mode, Speed Dial action items are displayed in a list-like format either horizontally or vertically. By default, Speed Dial items are displayed in Linear mode.

Direction

You can open the action items on the top, left, up, and down side of the Speed Dial button by setting direction property. The default value is Auto where the action items are displayed based on the positionof the Speed Dial.

The Linear directions of Speed Dial are as follows:

  • Left - Action items are displayed on the left side of the button.
  • Right - Action items are displayed on the right side of the button.
  • Up - Action items are displayed on the top of the button.
  • Down - Action items are displayed on the bottom of the button.
  • Auto - Action items display direction auto calculated based on position of the Speed Dial. If Speed Dial is position at bottom right, then action items displayed at top.
import { SpeedDial, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

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

// Initialize the SpeedDial control in linear mode
let linearSpeeddial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    mode: 'Linear',
    direction: 'Left',
    target: '#targetElement'
});

// Render initialized SpeedDial
linearSpeeddial.appendTo('#speeddial');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 SpeedDial</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <!-- Add the SpeedDial component styles. -->
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!-- Elements to render the SpeedDial component. -->
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id='speeddial' title='Edit'></button>
    </div>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Radial display mode (Radial Menu)

In Radial mode, Speed Dial action items are displayed in a circular pattern like a radial menu. For more details about radial mode, check out the link here.