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.

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.

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 as demonstrated in the following example.

Example
View Source
Edit In Stackblitz  
Change Theme:

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:

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

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?