Radial menu in Vue Speed dial component

11 Jun 20247 minutes to read

The React Speed Dial action items can be displayed in a circular patter like a radial menu by setting mode property. You can customize the direction, startAngle, endAngle and offset by setting radialSettings property.

You can open the action items in either clockwise or anticlockwise by setting direction property. The default value is Auto where the action items are displayed based on the position property of the Speed Dial.

<template>
    <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' target='#targetElement' mode= 'Radial' :items='items' :radialSettings='radialSettings'></ejs-speeddial>
</template>

<script setup>
    import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
                const items = [
                    { iconCss: 'e-icons e-cut' },
                    { iconCss: 'e-icons e-copy' },
                    { iconCss: 'e-icons e-paste' },
                    { iconCss: 'e-icons e-edit' },
                    { iconCss: 'e-icons e-save' }
                ];
                const radialSettings = { direction: 'AntiClockwise' };
</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>

You can modify the start and end angle of action items by setting startAngle and endAngle properties. If the angle is not defined, the action items are displayed based on the position property of the Speed Dial.

<template>
    <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' target='#targetElement' mode= 'Radial' position='MiddleCenter' :items='items' :radialSettings='radialSettings'></ejs-speeddial>
</template>

<script setup>
    import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
                const items = [
                    { iconCss: 'e-icons e-cut' },
                    { iconCss: 'e-icons e-copy' },
                    { iconCss: 'e-icons e-paste' },
                    { iconCss: 'e-icons e-edit' },
                    { iconCss: 'e-icons e-save' }
                ];
                const radialSettings = { direction: 'AntiClockwise', startAngle: 180, endAngle: 360 };
</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>

Offset

You can modify the offset distance between action items and Speed Dial button using offset property.

<template>
    <ejs-speeddial id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' target='#targetElement' mode= 'Radial' :items='items' :radialSettings='radialSettings'></ejs-speeddial>
</template>

<script setup>
    import { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
                const items = [
                    { iconCss: 'e-icons e-cut' },
                    { iconCss: 'e-icons e-copy' },
                    { iconCss: 'e-icons e-paste' },
                    { iconCss: 'e-icons e-edit' },
                    { iconCss: 'e-icons e-save' }
                ];
                const radialSettings = { offset: '80px' };
</script>

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

Below example demonstrates the radial menu settings of the Speed Dial.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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' target='#targetElement'
            mode='Radial' position='MiddleRight' :items='items' :radialSettings='radialSettings'></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' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
], ;
const radialSettings = { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 };
</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' target='#targetElement'
            mode='Radial' position='MiddleRight' :items='items' :radialSettings='radialSettings'></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' },
                { iconCss: 'e-icons e-edit' },
                { iconCss: 'e-icons e-save' }
            ],
            radialSettings: { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 }
        };
    }
}
</script>

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

Radial menu in Vue Speed dial component

Radial menu direction

Radial menu start and end angle

Offset