Floating Actions

Floating actions component creates a floating button at the bottom of the screen.

You can move the floating button from left end to right end.

Table of Contents

1. Default selectors
2. Manual constructor
3. Options

Default selector

By default, all elements with the class="ui-floatingactions" or data-role="floatingactions" attribute are displayed as floating actions components.

Manual Constructor

To manually create a floating actions component, use the component constructor from the tau namespace:

The constructor requires an HTMLElement parameter to create the component, and you can get it with the document.getElementById() method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.

HTML code:

<div class="ui-floatingactions" id="floating">
   <button class="ui-floatingactions-item" data-icon="floating-add"/>
   <button class="ui-floatingactions-item" data-icon="floating-search"/>
</div>

JS code:

var elFloatingActions = document.getElementById("floating"),
    floatingActions = tau.widget.FloatingActions(elFloatingActions);

Options