Template in EJ2 TypeScript Speed dial control
10 May 202310 minutes to read
This section explains available templates in SpeedDial control 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.
import { SpeedDial, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text:'Cut', iconCss:'e-icons e-cut'},
{ text:'Copy', iconCss:'e-icons e-copy'},
{ text:'Paste', iconCss:'e-icons e-paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
openIconCss: 'e-icons e-edit',
content: 'Edit',
target: '#targetElement',
itemTemplate: '#itemTemplate'
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 SpeedDial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<!-- Add the SpeedDial component styles. -->
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<!-- Elements to render the SpeedDial component. -->
<button id='speeddial' title='Edit'></button>
<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
</div>
<script type="text/x-jsrender" id="itemTemplate">
<div class="itemlist">
<span class="icon ${iconCss}"style="padding:3px"></span>
<span class="text">${text}</span>
</div>
</script>
<script type="text/x-jsrender" id="popupTemplate">
<div>
<div class="speeddial-form">
<p>Here you can customize your code.</p>
</div>
</div>
</script>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.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);
}
.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;
}Popup template
You can use the popupTemplate property to set a template content for popup of SpeedDial control. The template content is defined as a child content of popupTemplate tag directive.
import { SpeedDial, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text:'Cut', iconCss:'e-icons e-cut'},
{ text:'Copy', iconCss:'e-icons e-copy'},
{ text:'Paste', iconCss:'e-icons e-paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
openIconCss: 'e-icons e-edit',
content: 'Edit',
target: '#targetElement',
popupTemplate: '#popupTemplate'
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 SpeedDial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<!-- Add the SpeedDial component styles. -->
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<!-- Elements to render the SpeedDial component. -->
<button id='speeddial' title='Edit'></button>
<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
</div>
<script type="text/x-jsrender" id="itemTemplate">
<div class="itemlist">
<span class="icon ${iconCss}"style="padding:3px"></span>
<span class="text">${text}</span>
</div>
</script>
<script type="text/x-jsrender" id="popupTemplate">
<div>
<div class="speeddial-form">
<p>Here you can customize your code.</p>
</div>
</div>
</script>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.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);
}
.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;
}