Template in Vue Speed dial component

11 Jun 20248 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.

<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 setup>

import { SpeedDialComponent as EjsSpeeddial } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

const itemTemplateContent = "<div class='itemlist'><span class='icon ${iconCss}' style='padding:3px'></span><span class='text' style='padding:0 5px'>${text}</span></div>";
const 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>
<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 { SpeedDialComponent  } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

export default {
name: "App",
components: {
"ejs-speeddial":SpeedDialComponent
},
    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>

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.

<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 setup>

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

enableRipple(true);
const 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>
<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 { SpeedDialComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
  name: "App",
  components: {
    "ejs-speeddial": SpeedDialComponent
  },
  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>