@progress/kendo-vue-buttons
Version:
94 lines (93 loc) • 2.79 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 { ToolbarOverflowProps } from './ToolbarOverflowProps';
/**
* Represents the `resize` event of the Toolbar.
*/
export interface ToolbarResizeEvent {
/**
* An event target.
*/
target: any;
/**
* The `offsetWidth` event of the Toolbar.
*/
offsetWidth: number;
/**
* The `offsetHeight` event of the Toolbar.
*/
offsetHeight: number;
/**
* A native DOM event.
*/
nativeEvent: any;
}
/**
* Represents the props of the [Kendo UI for Vue Toolbar component]({% slug overview_toolbar %}).
*/
export interface ToolbarProps extends ToolbarOverflowProps {
/**
* Sets additional classes to the Toolbar.
*/
className?: string;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string | undefined;
/**
* Specifies the `tabIndex` of the Toolbar.
*/
tabIndex?: number;
/**
* The `resize` event of the Toolbar.
*/
onResize?: (event: ToolbarResizeEvent) => void;
/**
* If set to `false`, it will turn off the built-in keyboard navigation.
*/
keyboardNavigation?: boolean;
/**
* @hidden
*
* The CSS selectors of the toolbar HTML elements used by built-in keyboard navigation.
* Each selector needs to point to a focusable element.
* Defaults to [
* 'button',
* '.k-button-group > button',
* '.k-dropdown > .k-dropdown-wrap',
* '.k-colorpicker > .k-picker-wrap'
* ].
*/
buttons?: string[];
/**
* Configures the `size` of the Toolbar.
*
* The available options are:
* - `small`—sets the padding of the component to 4px 4px
* - `medium`—sets the padding of the component to 8px 8px
* - `large`—sets the padding of the component to 10px 10px
*
* @default `undefined`
*/
size?: 'small' | 'medium' | 'large';
/**
* Configures the `fillMode` of the Toolbar.
*
* The available options are:
* - solid—Applies a `background` color and `solid borders`.
* - flat—Sets a `transparent background` and `solid bottom border`.
* - outline—Sets a `transparent background` and `solid borders`.
*
* @default `undefined`
*/
fillMode?: 'solid' | 'flat' | 'outline';
/**
* Defines the `aria-label` HTML attribute of the Toolbar.
*/
ariaLabel?: string;
}