Getting Started
    Native Components
    • Animation
    • Buttons
    • Charts
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • Notificationnew
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollViewnew
    • Tooltip
    • TreeViewnew
    • Upload
    Wrapper Components
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to Kendo UI for Vue? Start a free 30-day trial

FloatingActionButtonProps

Represents the props of the Kendo UI for Vue FloatingActionButton component.

NameTypeDefaultDescription

accessKey?

string

Specifies the accessKey of the main button.

align?

FloatingActionButtonAlign

Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container see example.

Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case. Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and vertical: "middle" at the same time is not supported.

The possible keys are:

  • horizontal Defines the possible horizontal alignment of the Floating Action Button..
    • startUses the start point of the container.
    • centerUses the center point of the container.
    • end(Default)Uses the end point of the container
  • vertical Defines the possible vertical alignment of the Floating Action Button..
    • topUses the top point of the container.
    • middleUses the middle point of the container.
    • bottom(Default)Uses the bottom point of the container.

alignOffset?

FloatingActionButtonAlignOffset

Specifies the horizontal and vertical offset applied to the Floating Action Button see example.

Normally, the floating button is positioned next to the boundaries of its container with a default offset of 16px.

Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are not in a corner, can be moved along the container's boundary or towards the center of the container.

A negative offset can be used to force a button to overflow the boundaries of its container.

The possible keys are:

  • xSets the horizontal offset of the Floating Action Button.
  • ySets the vertical offset of the Floating Action Button.

className?

string

Specifies a list of CSS classes that will be added to the Floating Action Button.

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL see example.

disabled?

boolean

Specifies if the Floating Action Button is disabled see example. Defaults to false.

fillMode?

"null" | string

solid

Configures the fillMode of the Floating Action Button.

The available options are:

  • solid
  • outline
  • flat
  • link
  • nullDoes not set a fillMode class.

icon?

string

Defines the icon rendered in the Floating Action Button see example.

iconClass?

string

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

id?

string

Sets the id property of the root HTML element.

item?

any

Overrides the default component responsible for visualizing a single item see example.

The default Component is: FloatingActionButtonItem.

items?

any

The collection of items that will be rendered in the Floating Action Button see example.

opened?

boolean

If defined it specifies if the Floating Action Button is opened.

popupSettings?

FloatingActionButtonPopupSettings

Represents the additional props that will be passed to the Popup inside the Floating Action Button see example.

positionMode?

FloatingActionButtonPositionMode

Specifies the position mode of the Floating Action Button see example. It is based on the CSS position rule.

  • The possible values are:
  • 'fixed' (Default)
  • 'absolute'

rounded?

"null" | string

medium

Configures the roundness of the Floating Action Button.

The available options are:

  • small
  • medium
  • large
  • circle
  • full
  • nullDoes not set a rounded class.

shape?

"null" | string

Specifies the shape of the Floating Action Button see example.

The possible values are:

  • pill(Default)Applies border radius equal to half of the height of the FloatingActionButton. If the Floating Action Button contains only icon, the shape will be circle.
  • circleApplies circle shape on the FloatingActionButton.
  • rectangleApplies no border radius on the FloatingActionButton.
  • roundedApplies default border radius on the FloatingActionButton.
  • squareApplies square shape on the FloatingActionButton.

size?

FloatingActionButtonSize

Specifies the size of the Floating Action Button see example.

The possible values are:

  • smallApplies half of the default padding, e.g. 8px.
  • medium (Default)Applies the default padding, e.g. 16px.
  • largeApplies one and one half of the default padding, e.g. 24px.

tabIndex?

number

Specifies the tabIndex of the main button.

text?

string

Specifies the text of the Floating Action Button see example.

themeColor?

FloatingActionButtonThemeColor

Specifies the theme color of the Floating Action Button see example.

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

Methods

onBlur

Fires when the Floating Action Button is blurred see example.

Parameters

event

FloatingActionButtonEvent

onClick

Fires when the Floating Action Button is clicked.

Parameters

event

FloatingActionButtonEvent

onClose

Fires when the popup which contains the items is closed see example.

Parameters

event

FloatingActionButtonEvent

onFocus

Fires when the Floating Action Button is focused see example.

Parameters

event

FloatingActionButtonEvent

onItemclick

Fires when the Floating Action Button Item is clicked see example.

Parameters

event

FloatingActionButtonItemEvent

onKeydown

Triggers onKeyDown event see example.

Parameters

event

FloatingActionButtonEvent

onMousedown

Triggers onMousedown event see example.

Parameters

event

FloatingActionButtonEvent

onMouseup

Triggers onMouseup event see example.

Parameters

event

FloatingActionButtonEvent

onOpen

Fires when the popup which contains the items is opened see example.

Parameters

event

FloatingActionButtonEvent