Search results

Styles in JavaScript (ES5) SpeedDial control

30 Jan 2023 / 3 minutes to read

This section briefs different ways to style SpeedDial control.

SpeedDial button

You can customize the icon and text of JavaScript(ES5) Speed Dial button using openIconCss, closeIconCss and content properties.

Icon only

You can use the openIconCss and closeIconCss properties to show icons in speed dial button. You can also show tooltip on hover to show additional details to end-user by setting title attribute.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

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

// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
Copied to clipboard
<!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="//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">
        <!-- Elements to render the SpeedDial component. -->
        <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>
Copied to clipboard
#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 button by setting content property without setting icon properties..

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

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

// Render initialized SpeedDial.
speeddial.appendTo('#speeddial');
Copied to clipboard
<!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="//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">
        <!-- Elements to render the SpeedDial component. -->
        <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>
Copied to clipboard
#container {
    visibility: hidden;
}

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

Icon with text

You show icon and text in SpeedDial button using openIconCss, closeIconCss and content properties together.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

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

// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
Copied to clipboard
<!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="//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">
        <!-- Elements to render the SpeedDial component. -->
        <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>
Copied to clipboard
#container {
    visibility: hidden;
}

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

Disabled

You can enable or disable the SpeedDial control using disabled property.

Copied to clipboard
// Initialize the SpeedDial control in disabled state
var speeddial = new ej.buttons.SpeedDial({
    content: 'Edit',
    target: '#targetElement',
    disabled: true
});

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

cssClass

The JavaScript(ES5) Speed Dial supports the following predefined styles that can be defined using the cssClass property. You can customize by setting the cssClass property with the below defined class.

cssClass Description
e-primary Used to represent a primary action.
e-outline Used to represent an appearance of button with outline.
e-info Used to represent an informative action.
e-success Used to represent a positive action.
e-warning Used to represent an action with caution.
e-danger Used to represent a negative action.
Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

// Initialize the SpeedDial with applied warning style
var speeddial = new ej.buttons.SpeedDial({
    content: 'Edit',
    target: '#targetElement',
    cssClass: 'e-warning'
});

// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
Copied to clipboard
<!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="//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">
        <!-- Elements to render the SpeedDial component. -->
        <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>
Copied to clipboard
#container {
    visibility: hidden;
}

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

Visible

You can set the Speed Dial button to visible/hidden state using visible property.

Copied to clipboard
// Initialize the SpeedDial control in hidden state
var speeddial = new ej.buttons.SpeedDial({
    content: 'Edit',
    target: '#targetElement',
    visible: false
});

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

Tooltip

You can show tooltip on hover to show additional details to end-user by setting title to Speed Dial button.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

// Initialize action items with tooltip
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({
    openIconCss:'e-icons e-edit',
    items: items,
    target: '#targetElement',
    title: 'Edit'
});

// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
Copied to clipboard
<!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="//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">
        <!-- Elements to render the SpeedDial component. -->
        <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>
Copied to clipboard
#container {
    visibility: hidden;
}

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

Opens on hover

You can use opensOnHover property to open actions items on hover itself. By default action items displayed only when clicking the speed dial button.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

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

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

// Render initialized SpeedDial
speedDial.appendTo('#speeddial');
Copied to clipboard
<!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="//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">
        <!-- Elements to render the SpeedDial component. -->
        <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>
Copied to clipboard
#container {
    visibility: hidden;
}

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