<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>

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>

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>