New to Kendo UI for Angular? Start a free 30-day trial

Dial Items

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 Dial items.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabled State

By default, the FloatingActionButton Dial items are enabled.

To disable a Dial item, pass the disabled field in the dialItems collection:

Example
View Source
Edit In Stackblitz  
Change Theme:

Animation

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:

  • durationSpecifies the animation duration in milliseconds for each dial item. Defaults to 180ms.
  • gapSpecifies the animation duration gap in milliseconds after each dial item is animated. Defaults to 90ms.
Example
View Source
Edit In Stackblitz  
Change Theme:

Display Overlay

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:

Example
View Source
Edit In Stackblitz  
Change Theme: