The action items in Vue Speed Dial can be displayed in Linear
and Radial
display modes by setting mode
property.
In Linear
display mode, Speed Dial action items are displayed in a list-like format either horizontally or vertically. By default, Speed Dial items are displayed in Linear
mode.
You can open the action items on the top, left, up, and down side of the Speed Dial button by setting direction
property. The default value is Auto
where the action items are displayed based on the position
of the Speed Dial.
The Linear
directions of Speed Dial are as follows:
position
of the Speed Dial. If Speed Dial is position at bottom right, then action items displayed at top.<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='Linear' direction='Left' :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';
</style>
In Radial
mode, Speed Dial action items are displayed in a circular pattern like a radial menu. For more details about radial mode, check out the link here.