/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { FloatingActionButtonPopupSettings } from './FloatingActionButtonPopupSettings'; import { FloatingActionButtonAlign } from '../models/align'; import { FloatingActionButtonAlignOffset } from '../models/align-offset'; import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events'; import { FloatingActionButtonPositionMode } from '../models/position-mode'; import { FloatingActionButtonSize } from '../models/size'; import { FloatingActionButtonThemeColor } from '../models/theme-color'; import { SVGIcon } from '@progress/kendo-vue-common'; /** * @hidden */ type Omit = Pick>; /** * Represents the props of the [Kendo UI for Vue * FloatingActionButton component]({% slug overview_floatingactionbutton %}). */ export interface FloatingActionButtonProps extends Omit { /** * Specifies a list of CSS classes that will be added to the Floating Action Button. */ className?: string; /** * Represents the `dir` HTML attribute. This is used to * switch from LTR to RTL [see example]({% slug rtl_buttons %}). */ dir?: string; /** * Sets the `id` property of the root HTML element. */ id?: string; /** * Specifies if the Floating Action Button is * disabled [see example]({% slug disabled_floatingactionbutton %}). Defaults to `false`. */ disabled?: boolean; /** * If defined it specifies if the Floating Action Button is opened. */ opened?: boolean; /** * Defines the icon rendered in the Floating Action * Button [see example]({% slug contenttypes_floatingactionbutton %}). */ icon?: string; /** * Defines the svg icon in a Kendo UI for Vue theme. */ svgIcon?: SVGIcon; /** * 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. */ iconClass?: string; /** * Specifies the text of the Floating Action * Button [see example]({% slug contenttypes_floatingactionbutton %}). */ text?: string; /** * Specifies the horizontal and vertical offset applied to the Floating Action Button * [see example]({% slug positioning_floatingactionbutton %}). * * 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. * */ alignOffset?: FloatingActionButtonAlignOffset; /** * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container * [see example]({% slug positioning_floatingactionbutton %}). * * > 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. * */ align?: FloatingActionButtonAlign; /** * Specifies the position mode of the Floating Action Button * [see example]({% slug positioning_floatingactionbutton %}). It is based on the * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule. * * * The possible values are: * * 'fixed' (Default) * * 'absolute' */ positionMode?: FloatingActionButtonPositionMode; /** * Configures the `roundness` of the Floating Action Button. * * The available options are: * - none * - small * - medium * - large * - circle * - full * * @default `undefined` */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Floating Action Button. * * The available options are: * - solid * - outline * - flat * - link * * @default `undefined` */ fillMode?: 'solid' | 'outline' | 'flat' | 'link'; /** * Specifies the size of the Floating Action Button * [see example]({% slug appearance_floatingactionbutton %}). * * 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`. * */ size?: FloatingActionButtonSize; /** * Specifies the theme color of the Floating Action Button * [see example]({% slug appearance_floatingactionbutton %}). * * The possible values are: * * `base` (Default)—Applies base coloring. * * `primary`—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. * */ themeColor?: FloatingActionButtonThemeColor; /** * The collection of items that will be rendered in the Floating Action Button * [see example]({% slug databinding_floatingactionbutton %}). */ items?: any; /** * Overrides the default component responsible for visualizing a single item * [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering). * * The default Component is: [FloatingActionButtonItem]({% slug api_buttons_floatingactionbuttonitemprops %}). */ item?: any; /** * Represents the additional props that will be passed to the Popup inside the Floating Action Button * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior). */ popupSettings?: FloatingActionButtonPopupSettings; /** * Specifies the `tabIndex` of the main button. */ tabIndex?: number; /** * Specifies the `accessKey` of the main button. */ accessKey?: string; /** * Fires when the Floating Action Button is focused * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onFocus?: (event: FloatingActionButtonEvent) => void; /** * Fires when the Floating Action Button is blurred * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onBlur?: (event: FloatingActionButtonEvent) => void; /** * Fires when the Floating Action Button is clicked. */ onClick?: (event: FloatingActionButtonEvent) => void; /** * Fires when the Floating Action Button Item is clicked * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onItemclick?: (event: FloatingActionButtonItemEvent) => void; /** * Triggers onKeyDown event * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onKeydown?: (event: FloatingActionButtonEvent) => void; /** * Triggers onMousedown event * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onMousedown?: (event: FloatingActionButtonEvent) => void; /** * Triggers onMouseup event * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onMouseup?: (event: FloatingActionButtonEvent) => void; /** * Fires when the popup which contains the items is opened * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onOpen?: (event: FloatingActionButtonEvent) => void; /** * Fires when the popup which contains the items is closed * [see example]({% slug overview_floatingactionbutton %}#toc-events). */ onClose?: (event: FloatingActionButtonEvent) => void; } export {};