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
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 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
gap—Specifies the gap of the animation duration in milliseconds after each Dial item is animated. Defaults to
To display an overlay over the content and beneath the FloatingActionButton, render a
The following example demonstrates how to toggle the visibility of an overlay element when the FloatingActionButton opens and closes.