ASP.NET Core FloatingActionButton Overview
The FloatingActionButton is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI FloatingActionButton TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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.
Initializing the FloatingActionButton
The following example demonstrates how to initialize the FloatingActionButton, configure its items, and set its position.
@(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("share")
.Items(items=>{
items.Add().Icon("download").Label("Download").Click(onItemClick);
items.Add().Icon("print").Label("Print").Click(onItemClick);
items.Add().Icon("envelop").Label("Email").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>
<kendo-floatingactionbutton name="fab"
align="FloatingActionButtonAlign.BottomEnd"
align-offset-vertical="50"
align-offset-horizontal="50"
position-mode="FloatingActionButtonPositionMode.Absolute"
icon="share"
size="FloatingActionButtonSize.Medium"
theme-color="FloatingActionButtonThemeColor.Info">
<floatingactionbutton-items>
<floatingactionbutton-item label="Download"
icon="download"
click="onItemClick">
</floatingactionbutton-item>
<floatingactionbutton-item label="Print"
icon="print"
click="onItemClick">
</floatingactionbutton-item>
<floatingactionbutton-item label="Email"
icon="envelop"
click="onItemClick">
</floatingactionbutton-item>
</floatingactionbutton-items>
</kendo-floatingactionbutton>
Functionality and Features
- Alignment—The FloatingActionButton provides options that allow you to manipulate the position of the component.
- Appearance—You can set the size, color, icon, and text of the FloatingActionButton by using the built-in appearance options.
- Templates—The item templates allow you to control the rendering of the items in the FloatingActionButton popup.
- Accessibility—The FloatingActionButton is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
-
Events—The FloatingActionButton emits
Click(),Expand(), andCollapse()events that you can use to trigger specific actions.
Next Steps
- Getting Started with the FloatingActionButton
Basic Usage of the FloatingActionButton HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the FloatingActionButton TagHelper for ASP.NET Core (Demo)