/** * DevExtreme (ui/tab_panel.d.ts) * Version: 25.1.7 * Build date: Mon Nov 10 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import { DataSourceLike } from '../data/data_source'; import { UserDefinedElement, DxElement, } from '../core/element'; import { template, Position, TabsIconPosition, TabsStyle, } from '../common'; import { EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, ItemInfo, PointerInteractionEvent, } from '../events'; import CollectionWidget, { SelectionChangeInfo, SelectionChangingEventBase, } from './collection/ui.collection_widget.base'; import { Item as dxMultiViewItem, dxMultiViewBaseOptions, } from './multi_view'; export { Position, TabsIconPosition, TabsStyle, }; type ItemLike = string | Item | any; /** * * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface TabPanelItemInfo { /** * */ readonly itemData?: TItem; /** * */ readonly itemElement?: DxElement; /** * */ readonly itemIndex: number; } /** * The type of the contentReady event handler's argument. */ export type ContentReadyEvent = EventInfo>; /** * The type of the disposing event handler's argument. */ export type DisposingEvent = EventInfo>; /** * The type of the initialized event handler's argument. */ export type InitializedEvent = InitializedEventInfo>; /** * The type of the itemClick event handler's argument. */ export type ItemClickEvent = NativeEventInfo, KeyboardEvent | MouseEvent | PointerEvent> & ItemInfo; /** * The type of the itemContextMenu event handler's argument. */ export type ItemContextMenuEvent = NativeEventInfo, PointerInteractionEvent> & ItemInfo; /** * The type of the itemHold event handler's argument. */ export type ItemHoldEvent = NativeEventInfo, PointerInteractionEvent> & ItemInfo; /** * The type of the itemRendered event handler's argument. */ export type ItemRenderedEvent = EventInfo> & ItemInfo; /** * The type of the optionChanged event handler's argument. */ export type OptionChangedEvent = EventInfo> & ChangedOptionInfo; /** * The type of the selectionChanging event handler's argument. */ export type SelectionChangingEvent = SelectionChangingEventBase>; /** * The type of the selectionChanged event handler's argument. */ export type SelectionChangedEvent = EventInfo> & SelectionChangeInfo; /** * The type of the titleClick event handler's argument. */ export type TitleClickEvent = NativeEventInfo, KeyboardEvent | MouseEvent | PointerEvent> & TabPanelItemInfo; /** * The type of the titleHold event handler's argument. */ export type TitleHoldEvent = NativeEventInfo, PointerInteractionEvent> & TabPanelItemInfo; /** * The type of the titleRendered event handler's argument. */ export type TitleRenderedEvent = EventInfo> & TabPanelItemInfo; /** * * @deprecated */ export interface dxTabPanelOptions< TItem extends ItemLike = any, TKey = any, > extends dxMultiViewBaseOptions, TItem, TKey> { /** * Specifies whether or not to animate the displayed item change. */ animationEnabled?: boolean; /** * Binds the UI component to data. */ dataSource?: DataSourceLike | null; /** * Specifies whether the UI component changes its state when a user pauses on it. */ hoverStateEnabled?: boolean; /** * Specifies a custom template for item titles. */ itemTitleTemplate?: template | ((itemData: TItem, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); /** * Specifies icon position relative to the text inside the tab. */ iconPosition?: TabsIconPosition; /** * An array of items displayed by the UI component. */ items?: Array; /** * Specifies the key property used to access data items. Each key value must be unique. */ keyExpr?: string | Function; /** * A function that is executed when a tab is clicked or tapped. */ onTitleClick?: ((e: TitleClickEvent) => void) | string; /** * A function that is executed when a tab has been held for a specified period. */ onTitleHold?: ((e: TitleHoldEvent) => void); /** * A function that is executed after a tab is rendered. */ onTitleRendered?: ((e: TitleRenderedEvent) => void); /** * Specifies whether to repaint only those elements whose data changed. */ repaintChangesOnly?: boolean; /** * A Boolean value specifying if tabs in the title are scrolled by content. */ scrollByContent?: boolean; /** * A Boolean indicating whether or not to add scrolling support for tabs in the title. */ scrollingEnabled?: boolean; /** * Specifies whether navigation buttons should be available when tabs exceed the UI component's width. */ showNavButtons?: boolean; /** * Specifies the styling mode for the active tab. */ stylingMode?: TabsStyle; /** * A Boolean value specifying whether or not to allow users to change the selected index by swiping. */ swipeEnabled?: boolean; /** * Specifies tab position relative to the panel. */ tabsPosition?: Position; } /** * The TabPanel is a UI component consisting of the Tabs and MultiView UI components. It automatically synchronizes the selected tab with the currently displayed view, and vice versa. */ export default class dxTabPanel< TItem extends ItemLike = any, TKey = any, > extends CollectionWidget, TItem, TKey> { } export type Item = dxTabPanelItem; /** * @deprecated Use Item instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxTabPanelItem extends dxMultiViewItem { /** * Specifies a badge text for the tab. */ badge?: string; /** * Specifies the icon to be displayed in the tab's title. */ icon?: string; /** * Specifies a template that should be used to render the tab for this item only. */ tabTemplate?: template | (() => string | UserDefinedElement); /** * Specifies the item title text displayed on a corresponding tab. */ title?: string; } export type ExplicitTypes< TItem extends ItemLike, TKey, > = { Properties: Properties; ContentReadyEvent: ContentReadyEvent; DisposingEvent: DisposingEvent; InitializedEvent: InitializedEvent; ItemClickEvent: ItemClickEvent; ItemContextMenuEvent: ItemContextMenuEvent; ItemHoldEvent: ItemHoldEvent; ItemRenderedEvent: ItemRenderedEvent; OptionChangedEvent: OptionChangedEvent; SelectionChangingEvent: SelectionChangingEvent; SelectionChangedEvent: SelectionChangedEvent; TitleClickEvent: TitleClickEvent; TitleHoldEvent: TitleHoldEvent; TitleRenderedEvent: TitleRenderedEvent; }; export type Properties< TItem extends ItemLike = any, TKey = any, > = dxTabPanelOptions; /** * @deprecated use Properties instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type Options< TItem extends ItemLike = any, TKey = any, > = Properties;