The FloatingActionButton allows you to display a stack of related sub-actions when it is clicked. In this article we will refer to the popup holding the actions as a
Dial and to the popup items as
The FloatingActionButton accepts a collection of dialItems and when pressed, allows you to display a stack of related Dial item actions.
By default, the FloatingActionButton Dial items are enabled.
The FloatingActionButton allows you to enable and disable its Dial items animation.
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
gap—Specifies the animation duration gap in milliseconds after each dial item is animated. Defaults to
To display an overlay over the content and beneath the FloatingActionButton, a
div.k-overlay element can be rendererd.
The following example demonstrates how to toggle the visibility of an overlay element when the FloatingActionButton opens and closes: