Positions in Vue Speed dial component

11 Jun 202412 minutes to read

The Speed dial control can be positioned anywhere on the target using the position property. If the target is not defined, then Speed Dial is positioned based on the browser viewport.

The position values of Speed Dial are as follows:

TopLeft
TopCenter
TopRight
MiddleLeft
MiddleCenter
MiddleRight
BottomLeft
BottomCenter
BottomRight

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' content='Add' position='BottomLeft' 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='Add' position='BottomLeft' 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
    },
    data() {
        return {};
    }
}
</script>

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

Opens items on hover

You can open the Speed Dial action items on mouse hover by setting the opensOnHover property.

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

<script setup>
    import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
                const items = [
                    { iconCss: 'e-icons e-cut' },
                    { iconCss: 'e-icons e-copy' },
                    { iconCss: 'e-icons e-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>

Programmatically show/hide Speed Dial items

You can open/close the Speed Dial action items programmatically using show and hide methods.

Below example demonstrates open/close action items on button click.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;">
            <ejs-button id="show" class="e-primary" v-on:click="showClick"> Show </ejs-button>
            <ejs-button id="hide" class="e-primary" v-on:click="hideClick"> Hide </ejs-button>
        </div>
        <ejs-speeddial ref="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, ButtonComponent as EjsButton } 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' }
];
const showClick = function () {
    this.$refs.speeddial.show();
};
const hideClick = function () {
    this.$refs.speeddial.hide();
}
</script>

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

#hide {
    float: right;
}
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;">
            <ejs-button id="show" class="e-primary" v-on:click="showClick"> Show </ejs-button>
            <ejs-button id="hide" class="e-primary" v-on:click="hideClick"> Hide </ejs-button>
        </div>
        <ejs-speeddial ref="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, ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
    name: "App",
    components: {
        "ejs-button": ButtonComponent,
        "ejs-speeddial": SpeedDialComponent,
    },
    data() {
        return {
            items: [
                { iconCss: 'e-icons e-cut' },
                { iconCss: 'e-icons e-copy' },
                { iconCss: 'e-icons e-paste' }
            ]
        };
    },
    methods: {
        showClick: function () {
            this.$refs.speeddial.show();
        },
        hideClick: function () {
            this.$refs.speeddial.hide();
        }
    }
}
</script>

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

#hide {
    float: right;
}
</style>

Programmatically refresh the position

You can refresh the position of the Speed Dial using refreshPosition method when the targetposition is changed.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;">
            <ejs-button id="refresh" class="e-primary" v-on:click="refresh"> Refresh </ejs-button>
        </div>
        <ejs-speeddial ref="speeddial" id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close'
            target='#targetElement' position='MiddleRight' :items='items'></ejs-speeddial>
    </div>
</template>

<script setup>
import { SpeedDialComponent as EjsSpeeddial, ButtonComponent as EjsButton } 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' }
];

const refresh = function () {
    document.getElementById("targetElement").style.minHeight = "300px";
    this.$refs.speeddial.refreshPosition();
}
</script>

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

#hide {
    float: right;
}
</style>
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;">
            <ejs-button id="refresh" class="e-primary" v-on:click="refresh"> Refresh </ejs-button>
        </div>
        <ejs-speeddial ref="speeddial" id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close'
            target='#targetElement' position='MiddleRight' :items='items'></ejs-speeddial>
    </div>
</template>

<script>

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

enableRipple(true);
export default {
    name: "App",
    components: {
        "ejs-button": ButtonComponent,
        "ejs-speeddial": SpeedDialComponent
    },
    data() {
        return {
            items: [
                { iconCss: 'e-icons e-cut' },
                { iconCss: 'e-icons e-copy' },
                { iconCss: 'e-icons e-paste' }
            ]
        };
    },
    methods: {
        refresh: function () {
            document.getElementById("targetElement").style.minHeight = "300px";
            this.$refs.speeddial.refreshPosition();
        }
    }
}
</script>

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

#hide {
    float: right;
}
</style>