2023-03-01 08:06:07 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* TabView is a container component to group content with tabs.
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/tabview/)
|
|
|
|
*
|
|
|
|
* @module tabview
|
|
|
|
*
|
|
|
|
*/
|
2022-09-14 11:26:01 +00:00
|
|
|
import { ButtonHTMLAttributes, VNode } from 'vue';
|
2022-09-06 12:03:37 +00:00
|
|
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
|
|
|
|
2023-03-01 08:06:07 +00:00
|
|
|
/**
|
|
|
|
* Custom tab change event.
|
|
|
|
* @see tab-change
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface TabViewChangeEvent {
|
|
|
|
/**
|
|
|
|
* Browser event
|
|
|
|
*/
|
|
|
|
originalEvent: Event;
|
|
|
|
/**
|
|
|
|
* Index of the selected tab
|
|
|
|
*/
|
|
|
|
index: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2023-03-01 08:06:07 +00:00
|
|
|
* Custom tab change event.
|
|
|
|
* @see tab-click
|
2022-09-06 12:03:37 +00:00
|
|
|
* @extends TabViewChangeEvent
|
2023-03-02 11:46:04 +00:00
|
|
|
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
2022-09-14 11:26:01 +00:00
|
|
|
export interface TabViewClickEvent extends TabViewChangeEvent {}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-03-01 08:06:07 +00:00
|
|
|
/**
|
|
|
|
* Defines valid properties in TabView component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface TabViewProps {
|
|
|
|
/**
|
|
|
|
* Index of the active tab.
|
2023-03-01 08:06:07 +00:00
|
|
|
* @defaultValue 0
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
activeIndex?: number | undefined;
|
|
|
|
/**
|
|
|
|
* When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
|
2023-03-01 08:06:07 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
lazy?: boolean | undefined;
|
|
|
|
/**
|
|
|
|
* When enabled displays buttons at each side of the tab headers to scroll the tab list.
|
2023-03-01 08:06:07 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
scrollable?: boolean | undefined;
|
2022-09-14 11:26:01 +00:00
|
|
|
/**
|
|
|
|
* Index of the element in tabbing order.
|
2023-03-01 08:06:07 +00:00
|
|
|
* @defaultValue 0
|
2022-09-14 11:26:01 +00:00
|
|
|
*/
|
|
|
|
tabindex?: number | undefined;
|
|
|
|
/**
|
|
|
|
* When enabled, the focused tab is activated.
|
2023-03-01 08:06:07 +00:00
|
|
|
* @defaultValue false
|
2022-09-14 11:26:01 +00:00
|
|
|
*/
|
|
|
|
selectOnFocus?: boolean | undefined;
|
|
|
|
/**
|
|
|
|
* Uses to pass all properties of the HTMLButtonElement to the previous button.
|
|
|
|
*/
|
|
|
|
previousButtonProps?: ButtonHTMLAttributes | undefined;
|
|
|
|
/**
|
|
|
|
* Uses to pass all properties of the HTMLButtonElement to the next button.
|
|
|
|
*/
|
|
|
|
nextButtonProps?: ButtonHTMLAttributes | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-03-01 08:06:07 +00:00
|
|
|
/**
|
|
|
|
* Defines valid slots in TabView slots.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface TabViewSlots {
|
|
|
|
/**
|
|
|
|
* Default slot to detect TabPanel components.
|
|
|
|
*/
|
2023-03-01 08:06:07 +00:00
|
|
|
default(): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-03-01 08:06:07 +00:00
|
|
|
/**
|
|
|
|
* Defines valid emits in TabView component.
|
|
|
|
*/
|
|
|
|
export interface TabViewEmits {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Emitted when the value changes.
|
|
|
|
* @param {number} value - New value.
|
|
|
|
*/
|
2023-03-01 08:06:07 +00:00
|
|
|
'update:modelValue'(value: number): void;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when an active tab is changed.
|
|
|
|
* @param {TabViewChangeEvent} event - Custom tab change event.
|
|
|
|
*/
|
2023-03-01 08:06:07 +00:00
|
|
|
'tab-change'(event: TabViewChangeEvent): void;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Callback to invoke when an active tab is clicked.
|
|
|
|
* @param {TabViewClickEvent} event - Custom tab click event.
|
|
|
|
*/
|
2023-03-01 08:06:07 +00:00
|
|
|
'tab-click'(event: TabViewClickEvent): void;
|
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-03-01 08:06:07 +00:00
|
|
|
/**
|
|
|
|
* **PrimeVue - TabView**
|
|
|
|
*
|
|
|
|
* _TabView is a container component to group content with tabs._
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/tabview/)
|
|
|
|
* --- ---
|
2023-03-03 10:55:20 +00:00
|
|
|
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
|
2023-03-01 08:06:07 +00:00
|
|
|
*
|
|
|
|
* @group Component
|
|
|
|
*
|
|
|
|
*/
|
2023-03-01 12:30:54 +00:00
|
|
|
declare class TabView extends ClassComponent<TabViewProps, TabViewSlots, TabViewEmits> {}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
declare module '@vue/runtime-core' {
|
|
|
|
interface GlobalComponents {
|
2022-09-14 11:26:01 +00:00
|
|
|
TabView: GlobalComponentConstructor<TabView>;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TabView;
|