New to Kendo UI for jQuery? Start a free 30-day trial

Items

configuration

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.

items

Array

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        align: 'top start',
        icon: 'home',
        items: [{
            label: 'Save',
            icon: 'save',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('save action'); }
        }, {
            label: 'Print',
            icon: 'print',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('print action'); }
        }]
    });
</script>

items.click

Function

Specifies the click event handler of the speed-dial item.

Default: false

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        align: 'top start',
        icon: 'home',
        items: [{
            label: 'Download',
            icon: 'download',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('download action'); }
        }]
    });
</script>

items.cssClass

String

Specifies a set of CSS classes for the speed-dial item.

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        align: 'top start',
        icon: 'home',
        items: [{
            label: 'Download',
            icon: 'download',
            cssClass: 'fab-download-action',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('download action'); }
        }]
    });
</script>

items.enabled

Boolean

Specifies whether the Item is enabled or not. By default all items are enabled.

Default: true

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        align: 'top start',
        icon: 'home',
        items: [{
            label: 'Save',
            icon: 'save',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('save action'); }
        }, {
            label: 'Print',
            icon: 'print',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('print action'); },
            enabled: false
        }]
    });
</script>

items.icon

String

Specifies the name for an existing icon in a Kendo UI theme that is rendered in the speed-dial item.

See the Web Font Icons help article for more details on Kendo UI icons.

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        align: 'top start',
        icon: 'home',
        items: [{
            icon: 'download',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('download action'); }
        }]
    });
</script>

items.label

String

Specifies the label for the speed-dial item.

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        icon: 'home',
        items: [{
            label: 'Save',
            icon: 'save',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('save action'); }
        }]
    });
</script>

items.template

String|Function

Specifies the template used to render the contents of the speed-dial item.

The fields which can be used inside the template are:

text String - the label of the item (if configured).
icon String - the icon specified for this step (if configured).

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        icon: 'home',
        items: [{
            label: 'print',
            template: '#:text#',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('print action'); }
        }]
    });
</script>

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        icon: 'home',
        items: [{
            label: 'print',
            template: function(e) {
                return '<strong>' + e.text + '</strong>';
            },
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('print action'); }
        }]
    });
</script>

items.title

String

Specifies the label for the speed-dial item that will be read by assistive technologies.

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        icon: 'home',
        items: [{
            icon: 'print',
            title: 'print action title',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('print action'); }
        }]
    });
</script>