Vue Speed Dial Component

Overview

The Vue Speed Dial component is an extension of the Vue Floating Action Button that displays a list of action buttons when clicked. It displays action buttons in linear and radial directions.

• Vue Speed Dial demo
• Vue Speed Dial getting started documentation

Display modes

The Vue Speed Dial component supports the display of action items in a linear or radial layout. This helps make actions more accessible and easy to use.

Built-in themes

The Vue Speed Dial supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application.

• Theme Studio application

Vue Speed Dial code example

Easily get started with the Vue Speed Dial using a few simple lines of Vue code example as demonstrated below. Also explore our Vue Speed Dial Example that shows you how to render and configure the Vue Speed Dial.

<template>
    <ejs-speeddial openIconCss='e-icons e-edit' :items='items'></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);

export default { 
    data: function () {
        return {
            items: [
                { iconCss:'e-icons e-cut' },
                { iconCss:'e-icons e-copy' },
                { iconCss:'e-icons e-paste' }
            ]
        };
    }
}
</script>

Other supported frameworks

The Speed Dial component is also available in Blazor, Angular, React, and JavaScript frameworks. Check out the component on other platforms using these links:

• Blazor Speed Dial

• JavaScript Speed Dial

• Angular Speed Dial

• React Speed Dial

Reference

https://www.syncfusion.com/vue-components/vue-fab