@progress/kendo-vue-layout
Version:
1,718 lines (1,654 loc) • 129 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { BottomNavigationItemProps as BottomNavigationItemProps_2 } from './BottomNavigationItemProps';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { DrawerAnimation as DrawerAnimation_2 } from '..';
import { DrawerItemProps as DrawerItemProps_2 } from '..';
import { DrawerSelectEvent as DrawerSelectEvent_2 } from '..';
import { ExtractPropTypes } from 'vue';
import { GridLayoutColumnProps as GridLayoutColumnProps_2 } from '..';
import { GridLayoutGap as GridLayoutGap_2 } from './interfaces/GridLayoutProps';
import { GridLayoutRowProps as GridLayoutRowProps_2 } from '..';
import { MenuItemModel as MenuItemModel_2 } from '../..';
import { Navigation } from '@progress/kendo-vue-common';
import { PanelBarExpandMode as PanelBarExpandMode_2 } from './interfaces/PanelBarProps';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { StepProps as StepProps_2 } from '..';
import { SVGIcon } from '@progress/kendo-vue-common';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
/**
* @hidden
*/
export declare const ActionSheet: DefineComponent<ExtractPropTypes< {
expand: PropType<boolean>;
animation: {
type: PropType<boolean>;
default: boolean;
};
animationDuration: {
type: PropType<number>;
default: number;
};
animationStyles: PropType<any>;
tabIndex: PropType<number>;
items: PropType<ActionSheetItemProps[]>;
subTitle: PropType<string>;
title: PropType<string>;
className: PropType<string>;
headerClassName: {
type: PropType<string>;
default: any;
};
contentClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
footerClassName: {
type: PropType<string>;
default: any;
};
header: PropType<string | Function>;
content: PropType<string | Function>;
footer: PropType<string | Function>;
item: PropType<string | Function>;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
navigatableElements: {
type: PropType<string[]>;
default: () => any[];
};
actions: PropType<any>;
onClose: PropType<(event: any) => void>;
}>, {}, {
show: boolean;
slide: boolean;
}, {
topGroupItems(): Array<ActionSheetItemProps> | undefined;
bottomGroupItems(): Array<ActionSheetItemProps> | undefined;
shouldRenderSeparator(): boolean;
}, {
handleKeyDown(e: any): void;
onTab(target: HTMLElement, nav: Navigation, ev: any): void;
handleOverlayClick(ev: any): void;
handleItemClick(ev: {
syntheticEvent: any;
title?: string;
item?: any;
}): void;
onEnter(target: HTMLElement, nav: Navigation, ev: any): void;
onEscape(_target: HTMLElement, _nav: Navigation, ev: any): void;
hideActionSheet(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
expand: PropType<boolean>;
animation: {
type: PropType<boolean>;
default: boolean;
};
animationDuration: {
type: PropType<number>;
default: number;
};
animationStyles: PropType<any>;
tabIndex: PropType<number>;
items: PropType<ActionSheetItemProps[]>;
subTitle: PropType<string>;
title: PropType<string>;
className: PropType<string>;
headerClassName: {
type: PropType<string>;
default: any;
};
contentClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
footerClassName: {
type: PropType<string>;
default: any;
};
header: PropType<string | Function>;
content: PropType<string | Function>;
footer: PropType<string | Function>;
item: PropType<string | Function>;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
navigatableElements: {
type: PropType<string[]>;
default: () => any[];
};
actions: PropType<any>;
onClose: PropType<(event: any) => void>;
}>> & Readonly<{}>, {
animation: boolean;
contentClassName: string;
animationDuration: number;
headerClassName: string;
headerStyle: string;
footerClassName: string;
navigatable: boolean;
navigatableElements: string[];
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetContent: DefineComponent<ExtractPropTypes< {
contentClassName: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
contentClassName: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
contentClassName: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetFooter: DefineComponent<ExtractPropTypes< {
footerClassName: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
footerClassName: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
footerClassName: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetHeader: DefineComponent<ExtractPropTypes< {
headerClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
headerClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
headerClassName: string;
headerStyle: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetItem: DefineComponent<ExtractPropTypes< {
id: PropType<number>;
description: PropType<string>;
disabled: PropType<boolean>;
group: {
type: PropType<string>;
validator: (value?: string) => any;
};
item: PropType<object>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconColor: PropType<string>;
iconSize: PropType<string>;
content: PropType<string | Function>;
title: PropType<string>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>, {}, {}, {
wrapperClass(): {
'k-actionsheet-item': boolean;
'k-cursor-pointer': boolean;
'k-disabled': any;
};
}, {
onClick(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<number>;
description: PropType<string>;
disabled: PropType<boolean>;
group: {
type: PropType<string>;
validator: (value?: string) => any;
};
item: PropType<object>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconColor: PropType<string>;
iconSize: PropType<string>;
content: PropType<string | Function>;
title: PropType<string>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
tabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the props of the Kendo UI for Vue ActionSheetItem.
*/
export declare interface ActionSheetItemProps {
/**
* Sets additional CSS classes to the ActionSheetItem.
*/
class?: string;
/**
* Sets additional CSS styles to the ActionSheetItem.
*/
style?: object;
/**
* Specifies additional text rendered under the item's title.
*/
description?: string;
/**
* Specifies if the ActionSheet item is initially disabled.
*/
disabled?: boolean;
/**
* Defines the group of the item. Items can be segregated in two groups - `top` and `bottom`.
* Each specifying whether the ActionSheet item will be rendered over the separator or under it.
*/
group?: 'top' | 'bottom' | string;
/**
* Defines the icon rendered inside the ActionSheet item.
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered inside the ActionSheet item.
*/
svgIcon?: SVGIcon;
/**
* Defines an size of the icon or SVGIcon that is rendered inside the ActionSheet item.
*/
iconSize?: string;
/**
* Defines the color of the icon or SVGIcon that is rendered inside the ActionSheet item.
*/
iconColor?: string;
/**
* Specifies the text content of the ActionSheet item.
*/
title?: string;
/**
* @hidden
*/
item?: object;
/**
* Sets the content of the ActionSheetItem either as string that is pointing to a slot template of as render function.
*/
content?: string | Function;
/**
* @hidden
*/
onClick?: (event: {
event: any;
title?: string;
}) => void;
/**
* @hidden
*/
onKeydown?: (event: any, title: string | undefined, id: number | undefined) => void;
/**
* @hidden
*/
id?: number;
/**
* The tabIndex of the ActionSheetItem.
*/
tabIndex?: number;
}
/**
* The props of the ActionSheet component.
*/
export declare interface ActionSheetProps {
/**
* The collection of items that will be rendered in the ActionSheet.
*/
items?: ActionSheetItemProps[];
/**
* Specifies the text that is rendered under the title.
*/
subTitle?: string;
/**
* Specifies the text that is rendered as title.
*/
title?: string;
/**
* Fires when the modal overlay is clicked.
*/
onClose?: (event: any) => void;
/**
* Fires when an ActionSheet item is clicked.
*/
onItemselect?: (event: {
syntheticEvent: any;
title?: string;
item?: any;
}) => void;
/**
* Specifies the `tabIndex` of the ActionSheet.
*/
tabIndex?: number;
/**
* Specifies if the ActionSheet can be navigatable with keyboard.
* Defaults to `true`.
*/
navigatable?: boolean;
/**
* Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
*/
navigatableElements?: string[];
/**
* Controls the popup animation. By default, the animation is enabled.
*/
animation?: boolean;
/**
* @hidden
*/
animationStyles?: any;
/**
* @hidden
* Used to render the close button in the header of the ActionSheet.
*/
actions?: any;
/**
* Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
*/
animationDuration?: number;
/**
* The CSS classes that will be rendered on the inner ActionSheet element.
*/
className?: string;
/**
* The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.
*/
headerClassName?: string;
/**
* The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.
*/
footerClassName?: string;
/**
* The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.
*/
contentClassName?: string;
/**
* The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.
*/
headerStyle?: string;
/**
* Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
header?: string | Function;
/**
* Sets the content content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
content?: string | Function;
/**
* Sets the footer content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
footer?: string | Function;
/**
* Sets the item content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
item?: string | Function;
/**
* Specifies the state of the ActionSheet.
*/
expand?: boolean;
}
/**
* @hidden
*/
export declare const AppBar: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): AppBarComputed['wrapperClass'];
}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
themeColor: string;
position: string;
positionMode: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AppBarComputed {
[key: string]: any;
wrapperClass: object;
}
/**
* Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
*
* * The possible values are:
* * 'top' (Default)
* * 'bottom'
*
*/
export declare type AppBarPosition = 'top' | 'bottom';
/**
* Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
*
* * The possible values are:
* * 'static' (Default)
* * 'sticky'
* * 'fixed'
*/
export declare type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
/**
* Represents the props of the [Kendo UI for Vue AppBar component]({% slug overview_appbar %}).
* Used to display information, actions, branding titles and additional navigation on the current screen.
*/
export declare interface AppBarProps {
/**
* Sets the `id` property of the root AppBar element.
*/
id?: string;
/**
* Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
*
* * The possible values are:
* * 'top' (Default)
* * 'bottom'
*
*/
position?: AppBarPosition | string;
/**
* Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
*
* * The possible values are:
* * 'static' (Default)
* * 'sticky'
* * 'fixed'
*/
positionMode?: AppBarPositionMode | string;
/**
* Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
*
* * The possible values are:
* * `light` (Default)
* * 'primary'
* * 'dark'
* * 'inherit'
*
*/
themeColor?: AppBarThemeColor | string;
}
/**
* @hidden
*/
export declare const AppBarSection: DefineComponent< {}, {}, {}, {}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AppBarSectionComputed {
[key: string]: any;
wrapperClass: object;
}
/**
* @hidden
*/
export declare const AppBarSpacer: DefineComponent<ExtractPropTypes< {
width: PropType<string | number>;
}>, {}, {}, {
spacerClasses(): AppBarSpacerComputed['spacerClasses'];
spacerStyles(): AppBarSpacerComputed['spacerStyles'];
}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
width: PropType<string | number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AppBarSpacerComputed {
[key: string]: any;
spacerClasses: object;
spacerStyles: object;
}
/**
* Represents the props of the [Kendo UI for Vue AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
* Used to give additional white space between the AppBar sections and provides a way for customizing its width.
*/
export declare interface AppBarSpacerProps {
width?: string | number;
}
/**
* Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
*
* * The possible values are:
* * `inherit`
* * `light` (Default)
* * `dark`
*
*/
export declare type AppBarThemeColor = 'light' | 'dark' | 'inherit';
/**
* @hidden
*/
export declare const Avatar: DefineComponent<ExtractPropTypes< {
type: {
type: PropType<string>;
default: avatarType;
validator: (value: string) => any;
};
border: PropType<boolean>;
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): AvatarComputed['wrapperClass'];
innerClass(): AvatarComputed['innerClass'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
type: {
type: PropType<string>;
default: avatarType;
validator: (value: string) => any;
};
border: PropType<boolean>;
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
type: string;
themeColor: string;
size: string;
rounded: string;
fillMode: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AvatarComputed {
[key: string]: any;
wrapperClass: object;
innerClass: object;
}
declare enum avatarType {
TEXT = "text",
IMAGE = "image",
ICON = "icon"
}
/**
* An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
*/
declare interface BaseMenuItem {
/**
* Specifies the item text ([see example]({% slug itemproperties_menu %}#toc-text)).
*/
text?: string;
/**
* Specifies a URL which is rendered as a `href` attribute on the item link ([see example]({% slug itemproperties_menu %}#toc-url)).
*/
url?: string;
/**
* Specifies the name of the [FontIcon]({% slug overview_icon %}) that will be rendered for the item).
*/
icon?: string;
/**
* Specifies the name of the [SVGIcon]({% slug overview_svgicon %}) that will be rendered for the item).
*/
svgIcon?: SVGIcon_2;
/**
* Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-items)).
*/
disabled?: boolean;
/**
* The additional CSS classes that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
*/
cssClass?: string;
/**
* The additional CSS classes that will be rendered on the item's popup.
*/
popupClass?: string;
/**
* The CSS styles that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
*/
cssStyle?: any;
/**
* A Vue functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
*/
render?: any;
/**
* A Vue functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
*/
linkRender?: any;
/**
* A Vue functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
*/
contentRender?: any;
/**
* Represents any additional data that is associated with the Menu item.
*/
data?: any;
/**
* Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
*/
separator?: boolean;
}
/**
* @hidden
*/
export declare const BottomNavigation: DefineComponent<ExtractPropTypes< {
dir: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fill: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
item: PropType<any>;
items: PropType<BottomNavigationItemProps_2[]>;
itemFlow: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
border: {
type: PropType<boolean>;
default: boolean;
};
disabled: PropType<boolean>;
selected: PropType<number>;
}>, {}, {}, {
navClasses(): {
[x: string]: any;
[x: number]: boolean;
'k-bottom-nav': boolean;
'k-bottom-nav-border': any;
'k-disabled': any;
};
}, {
focus(): void;
dispatchSelectEvent(dispatchedEvent: any, index: number): void;
handleSelect(event: any, clickedItemIndex: number): void;
handleKeyDown(event: any, clickedItemIndex: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
dir: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fill: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
item: PropType<any>;
items: PropType<BottomNavigationItemProps_2[]>;
itemFlow: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
border: {
type: PropType<boolean>;
default: boolean;
};
disabled: PropType<boolean>;
selected: PropType<number>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
fill: string;
themeColor: string;
border: boolean;
fillMode: string;
positionMode: string;
itemFlow: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BottomNavigationComputed {
[key: string]: any;
navClasses: object;
}
/**
* Represents the return type of the BottomNavigation events.
*/
export declare interface BottomNavigationEvent {
}
/**
* The fill style of the BottomNavigation
* ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
*
* The possible values are:
* * `flat`(Default) — Sets the theme color as the text color. The background will be white.
* * `solid` — Sets the theme color as a background color.
*
*/
export declare type BottomNavigationFill = 'solid' | 'flat';
/**
* @hidden
*/
export declare const BottomNavigationItem: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
icon: PropType<any>;
item: PropType<any>;
text: PropType<any>;
dataItem: PropType<any>;
index: PropType<number>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>, {}, {}, {
itemClasses(): BottomNavigationItemComputed['itemClasses'];
}, {
handleClick(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
icon: PropType<any>;
item: PropType<any>;
text: PropType<any>;
dataItem: PropType<any>;
index: PropType<number>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
tabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BottomNavigationItemComputed {
[key: string]: any;
itemClasses: object;
}
/**
* Specifies how the icon and text label are positioned in each item of the BottomNavigation
* ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
*
* The possible values are:
* * `vertical`(Default) — Renders the text below the icon.
* * `horizontal` — Renders the text and the icon on the same line.
*/
export declare type BottomNavigationItemFlow = 'vertical' | 'horizontal';
/**
* The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
*/
export declare interface BottomNavigationItemProps {
/**
* Style the BottomNavigation item.
*/
style?: object;
/**
* Class the BottomNavigation item.
*/
class?: string;
/**
* Disables the BottomNavigation item.
*/
disabled?: boolean;
/**
* Specifies if the BottomNavigation item is selected.
*/
selected?: boolean;
/**
* Defines the name for an existing icon in a Kendo UI for Vue theme.
* The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
*/
icon?: any;
/**
* Specifies the text content of the BottomNavigation item.
*/
text?: any;
/**
* Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
*/
tabIndex?: number;
/**
* Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
*/
[customProp: string]: any;
/**
* @hidden
*/
index?: number;
/**
* @hidden
*/
item?: any;
/**
* @hidden
*/
dataItem?: any;
/**
* @hidden
*/
id?: string;
}
/**
* Specifies the position and behavior of the BottomNavigation when the page is scrolled
* ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
*
* The possible values are:
* * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
* * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
* static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
* It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
*/
export declare type BottomNavigationPositionMode = 'sticky' | 'fixed';
/**
* Represents the props of the [Kendo UI for Vue BottomNavigation component]({% slug overview_bottomnavigation %}).
*/
export declare interface BottomNavigationProps {
/**
* Sets the `id` property of the root BottomNavigation element.
*/
id?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Specifies the theme color of the BottomNavigation
* ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
*
* 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 inverted theme color.
*/
themeColor?: BottomNavigationThemeColor | string;
/**
* The fill style of the BottomNavigation
* ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
*
* The possible values are:
* * `flat`(Default) — Sets the theme color as the text color. The background will be white.
* * `solid` — Sets the theme color as a background color.
*/
fillMode?: BottomNavigationFill | string;
/**
* @hidden
*/
fill?: BottomNavigationFill | string;
/**
* Specifies the position and behavior of the BottomNavigation when the page is scrolled
* ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
*
* The possible values are:
* * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
* * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
* and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
* It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
*/
positionMode?: BottomNavigationPositionMode | string;
/**
* Specifies how the icon and text label are positioned in each item of the BottomNavigation
* ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
*
* The possible values are:
* * `vertical`(Default) — Renders the text below the icon.
* * `horizontal` — Renders the text and the icon on the same line.
*/
itemFlow?: BottomNavigationItemFlow | string;
/**
* Sets a border to the BottomNavigation.
*/
border?: boolean;
/**
* Disables the whole BottomNavigation.
*/
disabled?: boolean;
/**
* The index of the selected BottomNavigationItem.
*/
selected?: number;
/**
* The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
*/
items?: Array<BottomNavigationItemProps>;
/**
* Overrides the default component's content responsible for visualizing a single item
* ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
*/
item?: any;
/**
* Fires when a BottomNavigation item is about to be rendered
* ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
* Used to override the default appearance of the items.
*/
itemRender?: any;
/**
* Fires when a BottomNavigation item is selected.
*/
onSelect?: (event: BottomNavigationSelectEvent) => void;
/**
* Triggered on `onKeyDown` event.
*/
onKeyDown?: (event: BottomNavigationEvent) => void;
}
/**
* The arguments for the `onSelect` BottomNavigation event.
*/
export declare interface BottomNavigationSelectEvent {
/**
* A BottomNavigation item event target.
*/
itemTarget: any;
/**
* The index of the selected BottomNavigation item.
*/
itemIndex: number;
}
/**
* Specifies the theme color of the BottomNavigationThemeColor.
* ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
*
* 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 inverted theme color.
*/
export declare type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
/**
* @hidden
*/
export declare const Card: DefineComponent<ExtractPropTypes< {
dir: PropType<string>;
type: {
type: PropType<string>;
default: cardType;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): CardComputed['wrapperClass'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
dir: PropType<string>;
type: {
type: PropType<string>;
default: cardType;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
type: string;
orientation: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const CardActions: DefineComponent<ExtractPropTypes< {
layout: {
type: PropType<string>;
default: cardActionsLayout;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): {
[x: string]: boolean;
'k-card-actions': boolean;
'k-actions': boolean;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
layout: {
type: PropType<string>;
default: cardActionsLayout;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
orientation: string;
layout: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface CardActionsComputed {
[key: string]: any;
wrapperClass: object;
}
declare enum cardActionsLayout {
START = "start",
CENTER = "center",
END = "end",
STRETCHED = "stretched"
}
/**
* @hidden
*/
export declare const CardBody: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface CardComputed {
[key: string]: any;
wrapperClass: object;
}
/**
* @hidden
*/
export declare const CardFooter: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const CardHeader: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const CardImage: DefineComponent<ExtractPropTypes< {
src: PropType<string>;
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
src: PropType<string>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
declare enum cardOrientation {
HORIZONTAL = "horizontal",
VERTICAL = "vertical"
}
/**
* @hidden
*/
export declare const CardSubtitle: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const CardTitle: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
declare enum cardType {
DEFAULT = "default",
primary = "primary",
INFO = "info",
SUCCESS = "success",
WARNING = "warning",
ERROR = "error"
}
/**
* @hidden
*/
export declare const downArrowIcon: SVGIcon_2;
/**
* @hidden
*/
export declare const Drawer: DefineComponent<ExtractPropTypes< {
animation: {
type: PropType<boolean | DrawerAnimation_2>;
default: boolean;
};
expanded: {
type: PropType<boolean>;
default: boolean;
};
dir: {
type: StringConstructor;
default: string;
};
item: PropType<any>;
navigationHeader: PropType<Object | Function | String>;
navigationFooter: PropType<Object | Function | String>;
navigationContent: PropType<Object | Function | String>;
mode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
items: {
type: PropType<DrawerItemProps_2[]>;
default: any[];
};
mini: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: PropType<number>;
width: {
type: PropType<number>;
default: number;
};
miniWidth: {
type: PropType<number>;
default: number;
};
}>, {}, {
currentDir: string;
drawer: {
expanded: boolean;
mode: string;
dir: Function;
position: string;
animation: boolean | DrawerAnimation_2;
mini: boolean;
width: number;
miniWidth: number;
items: DrawerItemProps_2[];
item: any;
};
showLicenseWatermark: boolean;
}, {
drawerClassNames(): DrawerComputed['drawerClassNames'];
}, {
focus(): void;
handleSelect(itemTarget: any, itemIndex: number): void;
onOverlayClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
overlayclick: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
animation: {
type: PropType<boolean | DrawerAnimation_2>;
default: boolean;
};
expanded: {
type: PropType<boolean>;
default: boolean;
};
dir: {
type: StringConstructor;
default: string;
};
item: PropType<any>;
navigationHeader: PropType<Object | Function | String>;
navigationFooter: PropType<Object | Function | String>;
navigationContent: PropType<Object | Function | String>;
mode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
items: {
type: PropType<DrawerItemProps_2[]>;
default: any[];
};
mini: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: PropType<number>;
width: {
type: PropType<number>;
default: number;
};
miniWidth: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onOverlayclick?: (...args: any[] | unknown[]) => any;
}>, {
mode: string;
animation: boolean | DrawerAnimation_2;
dir: string;
expanded: boolean;
mini: boolean;
position: string;
width: number;
miniWidth: number;
items: DrawerItemProps_2[];
}, {}, {}, {}, string, () => {
kendoDrawer: any;
}, true, {}, any>;
/**
* Specifies the animation settings of the Drawer.
*
*/
export declare interface DrawerAnimation {
/**
* Specifies the type of the Drawer animation.
*/
type?: 'slide';
/**
* Specifies the duration of the Drawer animation ([see example]({% slug display_modes_drawer %}#toc-expand-modes)) .
*/
duration: number;
}
/**
* @hidden
*/
export declare interface DrawerComputed {
drawerClassNames: object;
}
/**
* @hidden
*/
export declare const DrawerContent: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The properties of the [Kendo UI for Vue DrawerContent component]({% slug overview_drawer %}).
*/
export declare interface DrawerContentProps {
}
/**
* @hidden
*/
export declare const DrawerItem: DefineComponent<ExtractPropTypes< {
index: PropType<number>;
text: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
separator: PropType<boolean>;
selected: PropType<boolean>;
disabled: PropType<boolean>;
targetItem: PropType<any>;
}>, {}, {}, {
itemClassNames(): DrawerItemComputed['itemClassNames'];
}, {
focus(e: any): void;
handleClick(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
index: PropType<number>;
text: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
separator: PropType<boolean>;
selected: PropType<boolean>;
disabled: PropType<boolean>;
targetItem: PropType<any>;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface DrawerItemComputed {
itemClassNames: object;
}
/**
* The DrawerItem ref.
*/
export declare interface DrawerItemHandle {
/**
* The DrawerItem element.
*/
element: any;
/**
* Focus the DrawerItem.
*/
focus: (e: any) => void;
/**
* The props of the DrawerItem.
*/
props?: any;
}
/**
* An interface for the Drawer items.
*/
export declare interface DrawerItemProps {
/**
* Specifies if the Drawer item is disabled.
*/
disabled?: boolean;
/**
* Defines the name for an existing icon in a Kendo UI for Vue theme.
* The icon is rendered inside the Drawer item by a `span.k-icon` element.
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the Drawer item.
*/
svgIcon?: SVGIcon;
/**
* Specifies if the Drawer item is initially selected.
*/
selected?: boolean;
/**
* Specifies if this is a separator item.
*/
separator?: boolean;
/**
* Specifies the text content of the Drawer item.
*/
text?: string;
/**
* Sets the index of the DrawerItem that is used to identify it.
*/
index?: number;
/**
* Sets the `tabIndex` property of the DrawerItem.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
*/
[customProp: string]: any;
/**
* @hidden
*/
onSelect?(target?: any, idx?: number): void;
}
/**
* @hidden
*/
export declare const DrawerNavigation: DefineComponent<ExtractPropTypes< {
item: PropType<any>;
header: PropType<any>;
footer: PropType<any>;
content: PropType<any>;
tabIndex: PropType<number>;
showLicenseWatermark: PropType<boolean>;
onSelect: PropType<(event: DrawerSelectEvent_2) => void>;
}>, {}, {}, {
navigationClassNames(): DrawerNavigationComputed['navigationClassNames'];
}, {
focus(e: any): void;
onDrawerItemSelect(e: any, index: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
item: PropType<any>;
header: PropType<any>;
footer: PropType<any>;
content: PropType<any>;
tabIndex: PropType<number>;
showLicenseWatermark: PropType<boolean>;
onSelect: PropType<(event: DrawerSelectEvent_2) => void>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface DrawerNavigationComputed {
navigationClassNames: object;
}
/**
* @hidden
*/
export declare interface DrawerNavigationProps {
item?: any;
header?: any;
footer?: any;
content?: any;
showLicenseWatermark?: boolean;
tabIndex?: number;
onSelect?: (event: DrawerSelectEvent) => void;
}
/**
* @hidden
*/
export declare interface DrawerNavigationState {
}
/**
* The properties of the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
*/
export declare 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;
}
/**
* The arguments for the `onSelect` Drawer event.
*/
export declare interface DrawerSelectEvent {
/**
* A Drawer item event target.
*/
itemTarget: any;
/**
* The index of the selected Drawer item.
*/
itemIndex: number;
}
/**
* @hidden
*/
export declare const ExpansionPanel: DefineComponent<ExtractPropTypes< {
dir: StringConstructor;
id: StringConstructor;
tabIndex: NumberConstructor;
title: StringConstructor;
subtitle: StringConstructor;
titleRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
subtitleRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
expandIcon: StringConstructor;
ex