Templates
The Telerik UI FloatingActionButton for ASP.NET Core provides full control over the rendering of the speed dial action items by using Kendo UI templates.
Item Templates
The Template and TemplateId configuration options allow you to manage the way the speed dial action items of a FloatingActionButton are rendered.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Icon("plus")
.Items(items=>{
items.Add().Icon("star").Label("Add Rating").TemplateId("fabTemplate");
items.Add().Icon("pencil").Label("Add comment").TemplateId("fabTemplate");
})
)
<script id="fabTemplate">
<span class="k-fab-item-text"><strong>#:text#</strong></span>
<span class= "k-fab-item-icon k-icon k-i-#:icon#"></span>
</script>
<kendo-floatingactionbutton name="fab"
icon="plus">
<floatingactionbutton-items>
<floatingactionbutton-item label="Add Rating"
icon="star"
templateId="fabTemplate">
</floatingactionbutton-item>
<floatingactionbutton-item label="Add Comment"
icon="edit"
templateId="fabTemplate">
</floatingactionbutton-item>
</floatingactionbutton-items>
</kendo-floatingactionbutton>
<script id="fabTemplate">
<span class="k-fab-item-text"><strong>#:text#</strong></span>
<span class= "k-fab-item-icon k-icon k-i-#:icon#"></span>
</script>