Styles in Vue Speed dial component

26 Sep 202416 minutes to read

This section briefs different ways to style SpeedDial component.

SpeedDial button

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

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script>

import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-speeddial": SpeedDialComponent
    },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Text only

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

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script>

import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
    name: "App",
    components: {
        "ejs-speeddial": SpeedDialComponent
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Icon with text

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

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' openIconCss='e-icons e-edit' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' openIconCss='e-icons e-edit' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
name: "App",
components: {
"ejs-speeddial":SpeedDialComponent
}
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Disabled

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

<template>
    <ejs-speeddial id='speeddial' content='Edit' disabled=true></ejs-speeddial>
</template>

<script setup>
import { SpeedDialComponent as EJsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

cssClass

The Vue 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. 
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' cssClass='e-warning' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit' cssClass='e-warning' target='#targetElement'></ejs-speeddial>
    </div>
</template>

<script>

import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-speeddial": SpeedDialComponent
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Visible

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

<template>
    <ejs-speeddial id='speeddial' content='Edit' visible=false></ejs-speeddial>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Tooltip

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

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' target='#targetElement' :items='items'></ejs-speeddial>
    </div>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
const items = [
    { iconCss: 'e-icons e-cut', title: 'Cut' },
    { iconCss: 'e-icons e-copy', title: 'Copy' },
    { iconCss: 'e-icons e-paste', title: 'Paste' }
];
</script>

<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial'  openIconCss='e-icons e-edit' target='#targetElement' :items='items'></ejs-speeddial>
    </div>
</template>

<script>

import { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

export default {
name: "App",
components: {
"ejs-speeddial":SpeedDialComponent
},
    data() {
        return {
            items: [
                { iconCss:'e-icons e-cut', title:'Cut' },
                { iconCss:'e-icons e-copy', title:'Copy' },
                { iconCss:'e-icons e-paste', title:'Paste' }
            ]
        };
    }
}
</script>

<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

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.

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' opensOnHover=true
            target='#targetElement' :items='items'></ejs-speeddial>
    </div>
</template>

<script setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
const items = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
];
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' opensOnHover=true
            target='#targetElement' :items='items'></ejs-speeddial>
    </div>
</template>

<script>

import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
    name: "App",
    components: {
        "ejs-speeddial": SpeedDialComponent
    },
    data() {
        return {
            items: [
                { iconCss: 'e-icons e-cut' },
                { iconCss: 'e-icons e-copy' },
                { iconCss: 'e-icons e-paste' }
            ]
        };
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

## Customized icon

You can use the cssClass property to customize the appearance of the speedDial component in its default primary state. Below example demonstrates the cssClass property usage in speedDial.

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial'  openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' cssClass='custom-css' target='#targetElement' :items='items'></ejs-speeddial>
    </div>
  </template>
  
  <script>
  import Vue from 'vue';
  import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";
  import { enableRipple } from '@syncfusion/ej2-base';
  enableRipple(true);
  Vue.use(SpeedDialPlugin);
  export default {
    data() {
        return {
            items: [
                { iconCss: 'e-icons e-cut' },
                { iconCss: 'e-icons e-copy' },
                { iconCss: 'e-icons e-paste' }
            ]
        };
    }
  }
  </script>
  
  <style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  
  .custom-css .e-btn-icon {
    color: darkgreen;
  }
  </style>