Dial Items

The FloatingActionButton allows you to display a stack of related sub-actions when it is clicked.

This article refers to the popup that holds the actions as a Dial, and to the popup items as Dial items.

The FloatingActionButton accepts a collection of dialItems and when pressed, allows you to display a stack of related Dial item actions.

Disabled State

By default, the FloatingActionButton Dial items are enabled.

To disable a Dial item, pass the disabled field in the dialItems collection as demonstrated in the following example.

Animation

The FloatingActionButton allows you to enable and disable the animation of its Dial items.

To control the animation behavior, set the following properties of the animation configuration object:

• duration—Specifies the animation duration in milliseconds for each Dial item. Defaults to 180ms.
• gap—Specifies the gap of the animation duration in milliseconds after each Dial item is animated. Defaults to 90ms.

Overlay

To display an overlay over the content and beneath the FloatingActionButton, render a div.k-overlay element.

The following example demonstrates how to toggle the visibility of an overlay element when the FloatingActionButton opens and closes.

Suggested Links

• API Reference of the FloatingActionButton