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

FloatingActionButtonComponent

Represents the Kendo UI FloatingActionButton component for Angular. Used to specify the primary or the most common action in an application.

Selector

kendo-floatingactionbutton

Inputs

buttonClass

any

The CSS classes that will be rendered on the main button. Supports the type of values that are supported by ngClass.

dialClass

any

The CSS classes that will be rendered on the dial items ul element. Supports the type of values that are supported by ngClass.

dialItemAnimation

boolean | DialItemAnimation

Specifies the animation settings of the FloatingActionButton dial items. (see example).

The possible values are:

  • Boolean
  • DialItemAnimation
    • 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.

dialItems

any[]

Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.

icon

string

Defines the name of an existing icon in a Kendo UI theme. If provided, the icon will be rendered inside the FloatingActionButton by a span.k-icon element.

iconClass

string

Defines a CSS class or multiple classes separated by spaces which are applied to a span element. Allows the usage of custom icons, rendered inside the FloatingActionButton by a span element.

positionMode

FabPositionMode

Specifies the positionMode of the FloatingActionButton (see example).

  • The possible values are:
  • absolutePositions the FloatingActionButton absolutely to its first positioned parent element.
  • fixed (Default)Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.

tabIndex

number

Specifies the tabIndex of the FloatingActionButton.

text

string

Specifies the text content of the FloatingActionButton.

align

FabAlign

Specifies the horizontal and vertical alignment of the FloatingActionButton (see example).

The possible values are:

  • { horizontal: 'start'|'center'|'end', vertical: 'top'|'middle'|'bottom' }

The default value is:

  • { horizontal: 'end', vertical: 'bottom' }

disabled

boolean

Specifies whether the FloatingActionButton is disabled.

offset

FabOffset

Specifies the horizontal and vertical offset position of the FloatingActionButton (see example).

  • The default value is:
  • { x: '16px', y: '16px' }

shape

ButtonShape

Specifies the shape of the FloatingActionButton (see example).

The possible values are:

  • pill (Default)Applies border radius equal to half of the height of the FloatingActionButton.
  • circleApplies circle shape on the FloatingActionButton.
  • rectangleApplies rectangular shape on the FloatingActionButton.
  • roundedApplies rounded shape on the FloatingActionButton.
  • squareApplies square shape on the FloatingActionButton.

size

ButtonSize

Specifies the size of the FloatingActionButton (see example).

The possible values are:

  • small
  • medium (Default)
  • large

themeColor

ButtonThemeColor

Specifies the theme color of the FloatingActionButton (see example). The theme color will be applied as background color of the component.

The possible values are:

  • primary (Default)Applies coloring based on the primary theme color.
  • secondaryApplies coloring based on the secondary theme color.
  • tertiary Applies coloring based on the tertiary theme color.
  • inherit Applies inherited coloring value.
  • infoApplies coloring based on the info theme color.
  • success Applies coloring based on the success theme color.
  • warning Applies coloring based on the warning theme color.
  • error Applies coloring based on the error theme color.
  • dark Applies coloring based on the dark theme color.
  • light Applies coloring based on the light theme color.
  • inverse Applies coloring based on the inverse theme color.

Fields

isOpen

boolean

Indicates whether the FloatingActionButton is currently open.

Events

close

EventEmitter<PreventableEvent>

Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open (more information and example).

dialItemClick

EventEmitter<DialItemClickEvent>

Fires each time a dial item is clicked.

blur

EventEmitter<any>

Fires each time the FloatingActionButton gets blurred.

focus

EventEmitter<any>

Fires each time the FloatingActionButton gets focused.

open

EventEmitter<PreventableEvent>

Fires each time the popup is about to open. This event is preventable. If you cancel the event, the popup will remain closed (more information and example).

Methods

blur

Blurs the FloatingActionButton.

focus

Focuses the FloatingActionButton.

toggleDial

Toggles the visibility of the FloatingActionButton dial items popup.

If you use the toggleDial method to open or close the dial items, the open and close events do not fire (more information and examples).

Parameters

open?

boolean

The state of dial items popup.