FloatingActionButton HtmlHelper Overview

The Telerik UI FloatingActionButton HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI FloatingActionButton widget.

The FloatingActionButton is a UI component that is tied to the most logical action that we expect from a user looking at a particular screen. For example, the most logical action for a user looking at the main screen of a mobile messaging app is to write a message. You can implement a FloatingActionButton that allows the user to compose a new message.

The FloatingActionButton floats in the application above other items, and its main action directly corresponds to the content on the screen. Apart from being a single button with a single action, the FloatingActionButton can also be configured to display additional related actions or speed dial actions.

Telerik UI for ASP.NET MVC Ninja image

The FloatingActionButton is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the FloatingActionButton

The following example demonstrates how to initialize the FloatingActionButton.

    @(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .ThemeColor(FloatingActionButtonThemeColor.Primary)
        .Align(FloatingActionButtonAlign.BottomEnd)
        .AlignOffset(ao=>ao.Horizontal(50).Vertical(50))
        .PositionMode(FloatingActionButtonPositionMode.Absolute)
        .Size(FloatingActionButtonSize.Medium)
        .Shape(FloatingActionButtonShape.Pill)
        .Icon("plus")
        .Items(items=>{
            items.Add().Icon("star").Label("Rate product").Click(onItemClick);
            items.Add().Icon("edit").Label("Leave comment").Click(onItemClick);
            items.Add().Icon("cart").Label("Add to cart").Click(onItemClick);
        })
    )

    <script type="text/javascript">
        $(function () {
            // The Name() of the FloatingActionButton is used to get its client-side instance.
            var fab = $("#fab").data("kendoFloatingActionButton");
            console.log(fab);
        });

        function onItemClick(e){
            // Handle the action item click event.
        }
    </script>

Functionality and Features

Events

You can subscribe to all FloatingActionButton events. For a complete example on FloatingActionButton events, refer to the demo on using the events of the FloatingActionButton.

The following example demonstrates how to subscribe to the FloatingActionButton click event.

@(Html.Kendo().FloatingActionButton()
        .Name("fab")
        .Events(e => e
            .Click("fab_click")
        )
)
<script>
    function fab_click() {
        // Handle the click event.
    }
</script>

See Also

In this article
Not finding the help you need? Improve this article