Positions in EJ2 TypeScript Speed dial control

10 May 202311 minutes to read

The Speed dial control can be positioned anywhere on the target using the position property. If the target is not defined, then Speed Dial is positioned based on the browser viewport.

The position values of Speed Dial are as follows:

TopLeft
TopCenter
TopRight
MiddleLeft
MiddleCenter
MiddleRight
BottomLeft
BottomCenter
BottomRight

index.ts
index.html
styles.css
import { SpeedDial } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the SpeedDial control in BottomLeft position
let speedDial: SpeedDial = new SpeedDial({
    content: 'Add',
    position: 'BottomLeft',
    target: '#targetElement'
});

// 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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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%;
}

Opens items on hover

You can open the Speed Dial action items on mouse hover by setting the opensOnHover property.

import { SpeedDial, SpeedDialItemModel } 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
let speedDial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    closeIconCss: 'e-icons e-close',
    opensOnHover: true,
    target: '#targetElement'
});

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

Programmatically show/hide SpeedDial items

You can open/close the Speed Dial action items programmatically using show and hide methods.

Below example demonstrates open/close action items on button click.

index.ts
index.html
styles.css
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
let speedDial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    closeIconCss: 'e-icons e-close',
    opensOnHover: true,
    target: '#targetElement'
});

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

//Show and Hide button click event handler
document.getElementById('show').addEventListener('click', function () {
    speedDial.show();
});

document.getElementById('hide').addEventListener('click', function() {
    speedDial.hide();
});
<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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:340px;border:1px solid;padding:10px;">
        <button id="show">Show</button>
        <button id="hide" style="float:right">Hide</button></div>
        <button id="speeddial"></button>
    </div>
</body>

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

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

button{
  background-color: #aaa;
  border: none;
  border-radius: 5px;
  color: black;
  padding: 13px 28px;
  text-align: center;
  display: inline-block;
  font-size: 15px;
}

Programmatically refresh the position

You can refresh the position of the Speed Dial using refreshPosition method when the targetposition is changed.

index.ts
index.html
styles.css
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
let speedDial: SpeedDial = new SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    closeIconCss: 'e-icons e-close',
    position: 'MiddleRight'
    target: '#targetElement'
});

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

// Refresh button click event handler
document.getElementById('refresh').addEventListener('click', function () {
    document.getElementById("targetElement").style.minHeight = "300px";
    speedDial.refreshPosition();
});
<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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:340px;border:1px solid;padding:10px;">
        <button id="refresh">Refresh</button></div>
        <button id="speeddial"></button>
    </div>
</body>

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

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

button{
  background-color: #aaa;
  border: none;
  border-radius: 5px;
  color: black;
  padding: 13px 28px;
  text-align: center;
  display: inline-block;
  font-size: 15px;
}