Getting Started with the FloatingActionButton
This guide demonstrates how to get up and running with the Kendo UI for jQuery FloatingActionButton.
After the completion of this guide, you will be able to achieve the following end result:
<button id="fab" type="button">Button</button>
<script>
$("#fab").kendoFloatingActionButton({
icon: 'info-circle',
items:[
{ label: "Item1", icon: 'check', click: function(ev){alert("Item 1 clicked!");} },
{ label: "Item2", icon: "calendar", enabled:false },
{ label: "Item3", icon: 'print'},
]
});
</script>
1. Create a Button Element
Create a <button> element on the page and use it as an initialization element for the FloatingActionButton.
<button id="fab" type="button"></button>
2. Initialize the FloatingActionButton
In this step, you will initialize the FloatingActionButton from the <button> element. All settings of the FloatingActionButton will be provided in the script statement and you have to describe its layout and configuration in JavaScript.
<button id="fab" type="button">Button</button>
<script>
$("#fab").kendoFloatingActionButton();
</script>
3. Add Items for the FloatingActionButton
Next, you can configure the items in the popup by using the items option.
<button id="fab" type="button">Button</button>
<script>
$("#fab").kendoFloatingActionButton({
items:[
{ label: "Item1", icon: 'check', click: function(ev){alert("Item 1 clicked!");} },
{ label: "Item2", icon: "calendar", enabled:false },
{ label: "Item3", icon: 'print'},
]
});
</script>
4. Add Icon to the FloatingActionButton
You can add an icon to the FloatingActionButton by utilizing the icon option.
<button id="fab" type="button"></button>
<script>
$("#fab").kendoFloatingActionButton({
icon: 'info-circle',
items:[
{ label: "Item1", icon: 'check', click: function(ev){alert("Item 1 clicked!");} },
{ label: "Item2", icon: "calendar", enabled:false },
{ label: "Item3", icon: 'print'},
]
});
</script>
Next Steps
- Referencing Existing Component Instances
- Demo Page for the FloatingActionButton
- Appearance of the FloatingActionButton