FloatingActionButtonProps
Represents the props of the Kendo UI for Vue FloatingActionButton component.
accessKey?
string
Specifies the accessKey of the main button.
align?
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..start—Uses the start point of the container.center—Uses 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..top—Uses the top point of the container.middle—Uses the middle point of the container.bottom(Default)—Uses the bottom point of the container.
alignOffset?
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:
x—Sets the horizontal offset of the Floating Action Button.y—Sets 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.
opened?
boolean
If defined it specifies if the Floating Action Button is opened.
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.
items?
any
The collection of items that will be rendered in the Floating Action Button see example.
onBlur?
(event: FloatingActionButtonEvent) => void
Fires when the Floating Action Button is blurred see example.
onClick?
(event: FloatingActionButtonEvent) => void
Fires when the Floating Action Button is clicked.
onClose?
(event: FloatingActionButtonEvent) => void
Fires when the popup which contains the items is closed see example.
onFocus?
(event: FloatingActionButtonEvent) => void
Fires when the Floating Action Button is focused see example.
onItemClick?
(event: FloatingActionButtonItemEvent) => void
Fires when the Floating Action Button Item is clicked see example.
onKeyDown?
(event: FloatingActionButtonEvent) => void
Triggers onKeyDown event see example.
onOpen?
(event: FloatingActionButtonEvent) => void
Fires when the popup which contains the items is opened see example.
popupSettings?
Represents the additional props that will be passed to the Popup inside the Floating Action Button see example.
positionMode?
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'
shape?
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.circle—Applies circle shape on the FloatingActionButton.rectangle—Applies no border radius on the FloatingActionButton.rounded—Applies default border radius on the FloatingActionButton.square—Applies square shape on the FloatingActionButton.
size?
Specifies the size of the Floating Action Button see example.
The possible values are:
small—Applies half of the default padding, e.g.8px.medium(Default)—Applies the default padding, e.g.16px.large—Applies 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?
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.secondary—Applies coloring based on the secondary theme color.tertiary— Applies coloring based on the tertiary theme color.info—Applies 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.
