JavaScript

Search results

Styles in JavaScript SpeedDial control

06 Jun 2023 / 4 minutes to read

This section briefs different ways to style SpeedDial control.

SpeedDial button

You can customize the icon and text of JavaScript 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

app.ts

index.html

styles.css

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

// Initialize the SpeedDial control with icon only
let speeddial: SpeedDial = new SpeedDial({
    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 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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</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%;
}

Text only

You can show only text in Speed Dial button by setting content property without setting icon properties..

Source

Preview

app.ts

index.html

styles.css

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

// Initialize the SpeedDial control with text only
let speeddial: SpeedDial = new SpeedDial({
    content: 'Edit',
    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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</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%;
}

Icon with text

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

Source

Preview

app.ts

index.html

styles.css

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

// Initialize the SpeedDial control with icon and text
let speeddial: SpeedDial = new SpeedDial({
    content: 'Edit',
    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 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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</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%;
}

Disabled

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

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

// Initialize the SpeedDial control in disabled state
let speeddial: SpeedDial = new SpeedDial({
    content: 'Edit',
    target: '#targetElement',
    disabled: true
});

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

cssClass

The JavaScript 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

app.ts

index.html

styles.css

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

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

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

Visible

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

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

// Initialize the SpeedDial control in hidden state
let speeddial: SpeedDial = new SpeedDial({
    content: 'Edit',
    target: '#targetElement',
    visible: false
});

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

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

Source

Preview

app.ts

index.html

styles.css

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

// Initialize action items with tooltip
let items: SpeedDialItemModel[] = [
    { 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
let speeddial: SpeedDial = new SpeedDial({
    openIconCss: 'e-icons e-edit',
    items: items,
    target: '#targetElement',
    title: 'Edit'
});

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

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

app.ts

index.html

styles.css

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');

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

Contents

SpeedDial button
Icon only
Text only
Icon with text
Disabled
cssClass
Visible
Tooltip
Opens on hover

Contents

SpeedDial button
Icon only
Text only
Icon with text
Disabled
cssClass
Visible
Tooltip
Opens on hover

Styles in JavaScript SpeedDial control

SpeedDial button

Icon only

Text only

Icon with text

Disabled

cssClass

Visible

Tooltip

Opens on hover