@progress/kendo-vue-layout
Version:
93 lines (92 loc) • 3.95 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 { DrawerSelectEvent } from './DrawerSelectEvent';
import { DrawerAnimation } from '../interfaces/DrawerAnimation';
import { DrawerItemProps } from './DrawerItemProps';
/**
* The properties of the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
*/
export interface DrawerProps {
/**
* Specifies the animation settings of the Drawer.
* If boolean enables or disables the default animation.
* Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
*/
animation?: boolean | DrawerAnimation;
/**
* Specifies the state of the Drawer. Defaults to `false` ([see example]({% slug expanded_state_drawer %})).
*/
expanded?: boolean;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Specifies the mode in which the Drawer will be displayed.
* The possible values are `overlay` and `push`.
* Defaults to `overlay` ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
*/
mode?: 'overlay' | 'push' | string;
/**
* Specifies the position of the Drawer.
* The possible values are `start` and `end` ([see example]({% slug positioning_drawer %})).
*/
position?: 'start' | 'end' | string;
/**
* Sets the `tabIndex` property of the Drawer.
*/
tabIndex?: number;
/**
* Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
* ([see example]({% slug display_modes_drawer %}#toc-mini-view))).
*/
mini?: boolean;
/**
* Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to `50`.
*/
miniWidth?: number;
/**
* Defines the width of the Drawer when it is expanded. Defaults to `240`.
*/
width?: number;
/**
* The collection of items that will be rendered in the Drawer ([see example]({% slug overview_drawer %})).
*/
items?: Array<DrawerItemProps>;
/**
* Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering %})).
*
* The default Component is: [DrawerItem]({% slug api_layout_draweritemprops %}).
*/
item?: any;
/**
* The event handler that will be fired when the overlay is clicked.
* Used in overlay mode only.
*/
onOverlayclick?: (event: any) => void;
/**
* Fires when a Drawer item is selected.
*/
onSelect?: (event: DrawerSelectEvent) => void;
/**
* Provides the option to define a `header` in the Drawer component ([see example]({% slug custom_rendering %})).
* The header is rendered above the Drawer Items. By default, the property is not defined.
*/
navigationHeader?: String | Object | Function;
/**
* Provides the option to define a `footer` in the Drawer component ([see example]({% slug custom_rendering %})).
* The footer is rendered below the Drawer Items. By default, the property is not defined.
*/
navigationFooter?: String | Object | Function;
/**
* Provides the option to define a custom template inside the navigational section of the Drawer component ([see example]({% slug custom_rendering %})).
* When defined, the custom template will override the default [DrawerItem]({% slug api_layout_draweritemprops %}) rendering.
* By default, the property is not defined.
*/
navigationContent?: String | Object | Function;
}