@progress/kendo-vue-buttons
Version:
312 lines (311 loc) • 10.5 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ButtonsPopupSettings } from './PopupSettings';
import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events';
import { SVGIcon } from '@progress/kendo-vue-common';
export interface DropDownButtonProps {
/**
* Specifies the `accessKey` of the main button.
*/
accessKey?: string;
/**
* Specifies the `ariaLabel` of the main button. By default it is set to the text of the DropDownButton and 'dropdownbutton'.
*/
ariaLabel?: string;
/**
* Specifies the text of the main button ([see example]({% slug overview_dropdownbutton %})).
*/
text?: any;
/**
* Specifies the list items ([see example]({% slug binding_dropdownbutton %}#toc-arrays-of-objects)).
*/
items?: any[];
/**
* Configures the field that will be used for the text of the `items`. `textField` has to be used together with the `items` prop ([see example]({% slug binding_dropdownbutton %}#toc-arrays-of-objects)).
*/
textField?: string;
/**
* Specifies the `tabIndex` of the main button.
*/
tabIndex?: number;
/**
* Determines whether the component is disabled ([see example]({% slug disabled_dropdownbutton %})).
*/
disabled?: boolean;
/**
* Opens the popup of the DropDownButton if set to `true`.
*/
opened?: boolean;
/**
* Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the DropDownButton.
*/
svgIcon?: SVGIcon;
/**
* Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
*/
iconClass?: string;
/**
* Defines the location of an image that will be displayed next to the main button text ([see example]({% slug icons_dropdownbutton %})).
*/
imageUrl?: string;
/**
* Configures the popup
* ([see example]({% slug customization_dropdownbutton %}#toc-popup)).
*/
popupSettings?: ButtonsPopupSettings;
/**
* Defines a named slot `string`, functional or class component which is used for rendering items ([see example]({% slug customization_dropdownbutton %}#toc-items-rendering)). The default rendering includes an icon, an image, and text.
*/
item?: null | any;
/**
* Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
* if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
*/
itemRender?: any;
/**
* Sets the `className` of the main button.
*/
buttonClass?: string;
/**
* Sets the direction of the component.
*/
dir?: string;
/**
* Configures the `size` of the Button.
*
* The available options are:
* - xs
* - small
* - medium
* - large
*
* @default `undefined`
*/
size?: 'xs' | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the Button.
*
* The available options are:
* - none
* - small
* - medium
* - large
* - circle
* - full
*
* @default `undefined`
*/
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the Button.
*
* The available options are:
* - solid
* - outline
* - flat
* - link
*
* @default `undefined`
*/
fillMode?: 'solid' | 'outline' | 'flat' | 'link';
/**
* Configures the `themeColor` of the Button.
*
* The available options are:
* - base
* - primary
* - secondary
* - tertiary
* - info
* - success
* - warning
* - error
* - inverse
*
* @default `undefined`
*/
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
/**
* Fires when the component is focused ([see example]({% slug events_dropdownbutton %})).
*/
onFocus?: (event: DropDownButtonFocusEvent) => void;
/**
* Fires when the component is blurred ([see example]({% slug events_dropdownbutton %})).
*/
onBlur?: (event: DropDownButtonBlurEvent) => void;
/**
* Fires when an item is clicked ([see example]({% slug events_dropdownbutton %})).
*/
onItemclick?: (event: DropDownButtonItemClickEvent) => void;
/**
* Fires when the popup which contains the items is opened ([see example]({% slug events_dropdownbutton %})).
*/
onOpen?: (event: DropDownButtonOpenEvent) => void;
/**
* Fires when the popup which contains the items is closed ([see example]({% slug events_dropdownbutton %})).
*/
onClose?: (event: DropDownButtonCloseEvent) => void;
}
export interface SplitButtonProps {
/**
* Specifies the `accessKey` of the main button.
*/
accessKey?: string;
/**
* Specifies the `ariaLabel` of the main button. By default it is set to the text of the SplitButton and 'splitbutton'.
*/
ariaLabel?: string;
/**
* Specifies the text of the main button ([see example]({% slug overview_splitbutton %})).
*/
text?: string;
/**
* Specifies the list items ([see example]({% slug binding_splitbutton %}#toc-arrays-of-objects)).
*/
items?: any[];
/**
* Configures the field that will be used for the text of the `items`. `textField` has to be used together with the `items` prop ([see example]({% slug binding_splitbutton %}#toc-arrays-of-objects)).
*/
textField?: string;
/**
* Specifies the `tabIndex` of the main button.
*/
tabIndex?: number;
/**
* Determines whether the component is disabled ([see example]({% slug disabled_splitbutton %})).
*/
disabled?: boolean;
/**
* Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the SplitButton.
*/
svgIcon?: SVGIcon;
/**
* Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
*/
iconClass?: string;
/**
* Defines the location of an image that will be displayed next to the main button text ([see example]({% slug icons_splitbutton %})).
*/
imageUrl?: string;
/**
* Configures the popup ([see example]({% slug customization_splitbutton %}#toc-popup)).
*/
popupSettings?: ButtonsPopupSettings;
/**
* Opens the popup of the SplitButton if set to `true`.
*/
opened?: boolean;
/**
* Defines a named slot `string`, functional or class component which is used for rendering items ([see example]({% slug customization_dropdownbutton %}#toc-items-rendering)). The default rendering includes an icon, an image, and text.
*/
item?: null | any;
/**
* Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
* if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
*/
itemRender?: any;
/**
* Sets the `className` of the SplitButton component.
*/
className?: string;
/**
* Sets the `className` of the main button.
*/
buttonClass?: string;
/**
* Sets the direction of the component.
*/
dir?: string;
/**
* Configures the `size` of the Button.
*
* The available options are:
* - xs
* - small
* - medium
* - large
*
* @default `undefined`
*/
size?: 'xs' | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the Button.
*
* The available options are:
* - none
* - small
* - medium
* - large
* - circle
* - full
*
* @default `undefined`
*/
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the Button.
*
* The available options are:
* - solid
* - outline
* - flat
* - link
*
* @default `undefined`
*/
fillMode?: 'solid' | 'outline' | 'flat' | 'link';
/**
* Configures the `themeColor` of the Button.
*
* The available options are:
* - base
* - primary
* - secondary
* - tertiary
* - info
* - success
* - warning
* - error
* - inverse
*
* @default `undefined`
*/
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
/**
* Fires when the main button is clicked ([see example]({% slug events_splitbutton %})).
*/
onButtonclick?: (event: SplitButtonClickEvent) => void;
/**
* Fires when the component is focused ([see example]({% slug events_splitbutton %})).
*/
onFocus?: (event: SplitButtonFocusEvent) => void;
/**
* Fires when the component is blurred ([see example]({% slug events_splitbutton %})).
*/
onBlur?: (event: SplitButtonBlurEvent) => void;
/**
* Fires when an item is clicked ([see example]({% slug events_splitbutton %})).
*/
onItemclick?: (event: SplitButtonItemClickEvent) => void;
/**
* Fires when the popup which contains the items is opened ([see example]({% slug events_splitbutton %})).
*/
onOpen?: (event: SplitButtonOpenEvent) => void;
/**
* Fires when the popup which contains the items is closed ([see example]({% slug events_splitbutton %})).
*/
onClose?: (event: SplitButtonCloseEvent) => void;
}