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 to180ms.gap—Specifies the gap of the animation duration in milliseconds after each Dial item is animated. Defaults to90ms.
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.