Radial menu in EJ2 TypeScript Speed dial control

10 May 20236 minutes to read

The JavaScript Speed Dial action items can be displayed in a circular patter like a radial menu by setting mode property. You can customize the direction, startAngle, endAngle and offset by setting radialSettings property.

You can open the action items in either clockwise or anticlockwise by setting direction property. The default value is Auto where the action items are displayed based on the position property of the Speed Dial.

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

// 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 anticlockwise direction
let radialSettings: RadialSettingsModel = { direction: 'AntiClockwise' };

// Initialize the SpeedDial control
let speedDial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    target: '#targetElement',
    mode: 'Radial',
    radialSettings: radialSettings
});

// Render initialized SpeedDial
speedDial.appendTo('#speeddial');

You can modify the start and end angle of action items by setting startAngle and endAngle properties. If the angle is not defined, the action items are displayed based on the position property of the Speed Dial.

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

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

// Initialize radial direction with start and end angles
let radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', startAngle: 180, endAngle: 360 };

// Initialize the SpeedDial control
let speedDial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    target: '#targetElement',
    mode: 'Radial',
    position: 'MiddleCenter',
    radialSettings: radialSettings
});

// Render initialized SpeedDial
speedDial.appendTo('#speeddial');

Offset

You can modify the offset distance between action items and Speed Dial button using offset property.

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

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

// Initialize radial direction with offset
let radialSettings: RadialSettingsModel = { offset: '80px' };

// Initialize the SpeedDial control
let speedDial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    target: '#targetElement',
    mode: 'Radial',
    radialSettings: radialSettings
});

// Render initialized SpeedDial
speedDial.appendTo('#speeddial');

Below example demonstrates the radial menu settings of the Speed Dial.

index.ts
index.html
styles.css
import { SpeedDial, SpeedDialItemModel, RadialSettingsModel } 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' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
];

// Initialize radial settings
let radialSettings: RadialSettingsModel = { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 };

// Initialize the SpeedDial control
let speedDial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    target: '#targetElement',
    mode: 'Radial',
    position: 'MiddleRight',
    radialSettings: radialSettings
});

// Render initialized SpeedDial
speedDial.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'></button>
    </div>
</body>

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

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

Radial menu in EJ2 TypeScript Speed dial control

Radial menu direction

Radial menu start and end angle

Offset