FloatingActionButtonComponent

Represents the Kendo UI FloatingActionButton component for Angular. Use it to represent the primary or most common action in an application.

html

<kendo-floatingactionbutton
    [icon]="'plus'"
    [text]="'Add'"
    [align]="{ horizontal: 'end', vertical: 'bottom' }">
</kendo-floatingactionbutton>

Selector

kendo-floatingactionbutton

Inputs

Name	Type	Default	Description
align	FabAlign	{ horizontal: 'end', vertical: 'top' }	Specifies the alignment of the FloatingActionButton (see example).
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	true	Specifies the animation settings of the FloatingActionButton dial items.
dialItems	DialItem[]		Specifies the collection of dial items rendered in the FloatingActionButton popup.
disabled	boolean	false	Specifies whether the FloatingActionButton is disabled.
icon	string		Defines the name of an existing icon in a Kendo UI theme.
iconClass	string		Defines a CSS class or multiple classes for custom icons.
offset	FabOffset	{ x: '16px', y: '16px' }	Specifies the offset position of the FloatingActionButton (see example).
positionMode	FabPositionMode	"fixed"	Specifies the position mode of the FloatingActionButton (see example).
rounded	ButtonRounded	"full"	Specifies the border radius of the FloatingActionButton (see example).
size	ButtonSize	"medium"	Specifies the size of the FloatingActionButton (see example).
svgIcon	SVGIcon		Defines an SVGIcon to be rendered within the FloatingActionButton.
tabIndex	number	0	Specifies the tabIndex of the FloatingActionButton.
text	string		Specifies the text content of the FloatingActionButton.
themeColor	ButtonThemeColor	"primary"	Specifies the theme color of the FloatingActionButton (see example).

Fields

Name	Type	Default	Description
isOpen	boolean		Indicates whether the FloatingActionButton is currently open.

Events

Name	Type	Description
close	EventEmitter<PreventableEvent>	Fires when the popup is about to close. This event is preventable (more information and example).
dialItemClick	EventEmitter<DialItemClickEvent>	Fires when a dial item is clicked.
blur	EventEmitter<any>	Fires when the FloatingActionButton is blurred.
focus	EventEmitter<any>	Fires when the FloatingActionButton is focused.
open	EventEmitter<PreventableEvent>	Fires when the popup is about to open. This event is preventable (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.