New to Telerik UI for ASP.NET Core? Download free 30-day trial

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>

See Also

In this article