Template in Vue Speed dial component

8 Aug 20234 minutes to read

This section explains available templates in SpeedDial component and its usage.

Item template

You can use the itemTemplate property to set a template content for the SpeedDial items. The template content is defined as a child content of itemTemplate tag directive.

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' content="Edit" :itemTemplate ="itemTemplateContent" 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 {
            itemTemplateContent:"<div class='itemlist'><span class='icon ${iconCss}' style='padding:3px'></span><span class='text' style='padding:0 5px'>${text}</span></div>",
            items: [
                { iconCss: 'e-icons e-cut', text: 'Cut' },
                { iconCss: 'e-icons e-copy', text: 'Copy' },
                { iconCss: 'e-icons e-paste', text: 'Paste' }
            ]
        };
    }
}
</script>

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

.itemlist .text {
  padding: 0 5px;
}

.e-speeddial-li .itemlist {
  display: inherit;
  width: 100%;
  border: 1px solid transparent;
  align-items: center;
  padding: 5px;
  border-radius: 500px;
  background-color: rgba(104, 99, 104, 0.1);
  box-shadow: 0 0 4px grey;
}

.e-speeddial-li .itemlist:hover {
  background-color: rgb(224, 224, 224);
}
</style>

Popup template

You can use the popupTemplate property to set a template content for popup of SpeedDial component. The template content is defined as a child content of popupTemplate tag directive.

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' content="Edit" :popupTemplate="popupTemplateContent" cssClass='popupSpeedDial' target='#targetElement'>
      <template v-slot:popupTemplateContent>
        <div>
          <div class="speeddial-form">
              <p>Here you can customize your code.</p>
          </div>
        </div>
      </template>
    </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 {
          popupTemplateContent:"<div><div class='speeddial-form'><p>Here you can customize your code.</p></div></div>"
        };
    }
}
</script>

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

.speeddial-form {
  width: 200px;
  height: 80px;
  text-align: center;
  border-radius: 15px;
  box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
  background: #f5f5f5;
  padding: 15px;
}
</style>