Overview
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.
The FloatingActionButton is part of Kendo UI for jQuery, 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.
Initializing the FloatingActionButton
The following example demonstrates how to initialize the FloatingActionButton.
<div id="fab"></div>
<script>
$(document).ready(function () {
$("#fab").kendoFloatingActionButton({
align: "bottom end",
alignOffset:{
x: 50,
y: 50
},
positionMode: "absolute",
themeColor: "primary",
icon: "share",
size: "medium",
items: [{
label: "Download",
icon: "download",
click: function () { console.log("download action"); }
}, {
label: "Print",
icon: "print",
click: function () { console.log("print action"); },
}, {
label: "Email",
icon: "envelope",
click: function () { console.log("email action"); }
}]
});
});
</script>