<kendo:floatingActionButton>
A JSP wrapper for Kendo UI FloatingActionButton.
Configuration Attributes
align java.lang.String
Specifies position of the FloatingActionButton relative to its container. Valid position options are: "top start": positions the button at top left corner of the container.; "top center": positions the button at top center of the container.; "top end": positions the button at top right corner of the container.; "middle start": positions the button at middle left of the container.; "middle end": positions the button at middle right of the container.; "bottom start": positions the button at bottom left corner of the container.; "bottom center": positions the button at top center of the container. or "bottom end": positions the button at bottom right corner of the container.. works in conjunction with positionMode and alignOffset.**Note: when using align, make sure the FloatingActionButton container has css position other than "static" and allows overflow content.
Example
<kendo:floatingActionButton align="align">
</kendo:floatingActionButton>
enabled boolean
Specifies whether the FloatingActionButton is enabled (true) or disabled (false).
Example
<kendo:floatingActionButton enabled="enabled">
</kendo:floatingActionButton>
fillMode java.lang.String
Sets a value controlling how the color is applied.
Example
<kendo:floatingActionButton fillMode="fillMode">
</kendo:floatingActionButton>
icon java.lang.String
Specifies the name for an existing icon in a Kendo UI theme that is rendered in the FloatingActionButton.See the Web Font Icons help article for more details on Kendo UI icons.
Example
<kendo:floatingActionButton icon="icon">
</kendo:floatingActionButton>
positionMode java.lang.String
Defines the type of positioning
Example
<kendo:floatingActionButton positionMode="positionMode">
</kendo:floatingActionButton>
rounded java.lang.String
Sets a value controlling the border radius.
Example
<kendo:floatingActionButton rounded="rounded">
</kendo:floatingActionButton>
shape java.lang.String
Specifies the shape of the component
Example
<kendo:floatingActionButton shape="shape">
</kendo:floatingActionButton>
size java.lang.String
Specifies the size of the component
Example
<kendo:floatingActionButton size="size">
</kendo:floatingActionButton>
text java.lang.String
Specifies the text of the FloatingActionButton. Default is empty string.
Example
<kendo:floatingActionButton text="text">
</kendo:floatingActionButton>
themeColor java.lang.String
Specifies the color of the component
Example
<kendo:floatingActionButton themeColor="themeColor">
</kendo:floatingActionButton>
visible boolean
Specifies if the FloatingActionButton is visible initially.
Example
<kendo:floatingActionButton visible="visible">
</kendo:floatingActionButton>
Configuration JSP Tags
kendo:floatingActionButton-alignOffset
Specifies the horizontal and vertical offset of the FloatingActionButton.
More documentation is available at kendo:floatingActionButton-alignOffset.
Example
<kendo:floatingActionButton>
<kendo:floatingActionButton-alignOffset></kendo:floatingActionButton-alignOffset>
</kendo:floatingActionButton>
kendo:floatingActionButton-items
Specifies the speed-dial items that will be rendered in a popup container anchored to the FloatingActionButton.**Note: when using the items configuration, clicking on the FloatingActionButton will open the popup containing the speed-dial list.
More documentation is available at kendo:floatingActionButton-items.
Example
<kendo:floatingActionButton>
<kendo:floatingActionButton-items></kendo:floatingActionButton-items>
</kendo:floatingActionButton>
Event Attributes
click String
Fires when the user clicks on a the FloatingActionButton.**Note: when using items configuration, clicking on the FloatingActionButton will open the speed-dial list popup.
For additional information check the click event documentation.
Example
<kendo:floatingActionButton click="handle_click">
</kendo:floatingActionButton>
<script>
function handle_click(e) {
// Code to handle the click event.
}
</script>
collapse String
Fires when the speed-dial popup is closed and its animation is finished.**Note: this event is triggered only when using items configuration.
For additional information check the collapse event documentation.
Example
<kendo:floatingActionButton collapse="handle_collapse">
</kendo:floatingActionButton>
<script>
function handle_collapse(e) {
// Code to handle the collapse event.
}
</script>
expand String
Fires when the speed-dial popup is opened and its animation is finished.**Note: this event is triggered only when using items configuration.
For additional information check the expand event documentation.
Example
<kendo:floatingActionButton expand="handle_expand">
</kendo:floatingActionButton>
<script>
function handle_expand(e) {
// Code to handle the expand event.
}
</script>
Event Tags
kendo:floatingActionButton-click
Fires when the user clicks on a the FloatingActionButton.**Note: when using items configuration, clicking on the FloatingActionButton will open the speed-dial list popup.
For additional information check the click event documentation.
Example
<kendo:floatingActionButton>
<kendo:floatingActionButton-click>
<script>
function(e) {
// Code to handle the click event.
}
</script>
</kendo:floatingActionButton-click>
</kendo:floatingActionButton>
kendo:floatingActionButton-collapse
Fires when the speed-dial popup is closed and its animation is finished.**Note: this event is triggered only when using items configuration.
For additional information check the collapse event documentation.
Example
<kendo:floatingActionButton>
<kendo:floatingActionButton-collapse>
<script>
function(e) {
// Code to handle the collapse event.
}
</script>
</kendo:floatingActionButton-collapse>
</kendo:floatingActionButton>
kendo:floatingActionButton-expand
Fires when the speed-dial popup is opened and its animation is finished.**Note: this event is triggered only when using items configuration.
For additional information check the expand event documentation.
Example
<kendo:floatingActionButton>
<kendo:floatingActionButton-expand>
<script>
function(e) {
// Code to handle the expand event.
}
</script>
</kendo:floatingActionButton-expand>
</kendo:floatingActionButton>