JavaScript (ES5)

Search results

Items in JavaScript (ES5) SpeedDial control

30 Jan 2023 / 2 minutes to read

The JavaScript(ES5) Speed Dial action items can be added by using items property.

Fields	Type	Description
`text`	`string`	Defines the text content of SpeedDialItem.
`iconCss`	`string`	Defines one or more CSS classes to include an icon or image in Speed Dial item.
`disabled`	`boolean`	Defines whether to enable or disable the SpeedDialItem.
`id`	`string`	Defines a unique value for the SpeedDialItem which can be used to identify the item in event args.
`title`	`string`	Defines the title of SpeedDialItem to display tooltip.

Icons in SpeedDial items

You can customize the icon and text of Speed Dial action items using iconCss and text properties.

Icon only

You can show icon only in SpeedDial items by setting iconCss property. You can show tooltip on hover to show additional details to end-user by setting title property.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize action items with icon only
var items = [
    { iconCss: 'e-icons e-cut', title: 'Cut' },
    { iconCss: 'e-icons e-copy', title: 'Copy' },
    { iconCss: 'e-icons e-paste', title: 'Paste' }
];

// Initialize the SpeedDial control
var speedDial = new ej.buttons.SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    closeIconCss: 'e-icons e-close',
    target: '#targetElement'
});

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

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 SplitButton</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">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id="speeddial"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
  visibility: hidden;
}

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

Text only

You can show only text in Speed Dial items by setting text property.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize action items with text only
var items = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
];

// Initialize the SpeedDial control
var speedDial = new ej.buttons.SpeedDial({
    items: items,
    content: 'Edit',
    target: '#targetElement'
});

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

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 SplitButton</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">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id="speeddial"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
  visibility: hidden;
}

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

Icon with text

You can show icon along with text in Speed Dial items by setting iconCss and text properties.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize action items with icon and text
var items = [
    { text: 'Cut', iconCss: 'e-icons e-cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
];

// Initialize the SpeedDial control
var speedDial = new ej.buttons.SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    closeIconCss: 'e-icons e-close',
    content: 'Edit',
    target: '#targetElement'
});

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

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 SplitButton</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">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id="speeddial"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
  visibility: hidden;
}

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

Disabled

You can disable Speed Dial items by setting disabled property as true.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize action items with disabled first item.
var items = [
    { text: 'Cut', disabled: true },
    { text: 'Copy' },
    { text: 'Paste' }
];

// Initialize the SpeedDial control
var speedDial = new ej.buttons.SpeedDial({
    items: items,
    content: 'Edit',
    target: '#targetElement'
});

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

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 SplitButton</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">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id="speeddial"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
  visibility: hidden;
}

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

Animation

The Speed Dial items can be animated during the opening and closing of the popup action items. You can customize the animation’s effect, delay, and duration by setting animation property. By default, Speed Dial animates with a fade effect and supports all speeddialanimation effects.

Below example demonstrates the Speed Dial items with applied Zoom effect.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize action items
var items = [
    { text: 'Cut', iconCss: 'e-icons e-cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
];

// Intialize animation effect 
var animation = { effect: 'Zoom' };

// Initialize the SpeedDial component
var speedDial = new ej.buttons.SpeedDial({
    items: items,
    openIconCss:'e-icons e-edit',
    closeIconCss:'e-icons e-close',
    content: 'Edit',
    animation: animation,
    target: '#targetElement'
});

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

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 SplitButton</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">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id="speeddial"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
  visibility: hidden;
}

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

Template

The Speed Dial supports to customize the action items and entire pop-up container by setting itemTemplate and popupTemplate properties. For more details about templates, check out the link here.

Contents

Icons in SpeedDial items
Icon only
Text only
Icon with text
Disabled
Animation
Template

Contents

Icons in SpeedDial items
Icon only
Text only
Icon with text
Disabled
Animation
Template