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.
@(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("email").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"
shape="FloatingActionButtonShape.Pill"
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="email"
click="onItemClick">
</floatingactionbutton-item>
</floatingactionbutton-items>
</kendo-floatingactionbutton>
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")
.Align(FloatingActionButtonAlign.BottomCenter)
.AlignOffset(ao=>ao.Vertical(50))
.PositionMode(FloatingActionButtonPositionMode.Fixed)
.Items(items=>{
items.Add().Icon("download").Label("Download").Click(onItemClick);
items.Add().Icon("print").Label("Print").Click(onItemClick);
items.Add().Icon("email").Label("Email").Click(onItemClick);
})
.Events(e =>
{
e.Click("onClick");
e.Expand("onExpand");
e.Collapse("onExpand");
})
)
<script>
function onClick(e){
//handle the FloatingActionButton click event
};
function onExpand(e){
//handle the FloatingActionButton expand event
};
function onCollapse(e){
//handle the FloatingActionButton collapse event
};
function onItemClick(e){
//handle the FloatingActionButton action item event
};
</script>
<kendo-floatingactionbutton name="fab"
on-click="onClick"
on-expand="onExpand"
on-collapse="onCollapse"
align="FloatingActionButtonAlign.BottomCenter"
align-offset-vertical="50"
position-mode="FloatingActionButtonPositionMode.Fixed"
icon="share">
<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="email" click="onItemClick"></floatingactionbutton-item>
</floatingactionbutton-items>
</kendo-floatingactionbutton>
<script>
function onClick(e){
//handle the FloatingActionButton click event
};
function onExpand(e){
//handle the FloatingActionButton expand event
};
function onCollapse(e){
//handle the FloatingActionButton collapse event
};
function onItemClick(e){
//handle the FloatingActionButton action item event
};
</script>