@ui5/webcomponents-react

import '@ui5/webcomponents/dist/TabContainer.js'; import type { ITab, TabContainerMoveEventDetail, TabContainerTabSelectEventDetail } from '@ui5/webcomponents/dist/TabContainer.js'; import type BackgroundDesign from '@ui5/webcomponents/dist/types/BackgroundDesign.js'; import type OverflowMode from '@ui5/webcomponents/dist/types/OverflowMode.js'; import type TabLayout from '@ui5/webcomponents/dist/types/TabLayout.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface TabContainerAttributes { /** * Defines whether the tab content is collapsed. * @default false */ collapsed?: boolean; /** * Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`. * * **Note:** Available since [v1.10.0](https://github.com/UI5/webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. * @default "Solid" */ contentBackgroundDesign?: BackgroundDesign | keyof typeof BackgroundDesign; /** * Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`. * * **Note:** Available since [v1.10.0](https://github.com/UI5/webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. * @default "Solid" */ headerBackgroundDesign?: BackgroundDesign | keyof typeof BackgroundDesign; /** * Defines if automatic tab selection is deactivated. * * **Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected. * Setting this property to `true` allows preventing this behavior. * * **Note:** Available since [v2.9.0](https://github.com/UI5/webcomponents/releases/tag/v2.9.0) of **@ui5/webcomponents**. * @default false */ noAutoSelection?: boolean; /** * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible. * All other tabs that can 't fit on the screen are available in an overflow tab "More". * * **Note:** * Only one overflow at the end would be displayed by default, * but when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection. * * **Note:** Available since [v1.1.0](https://github.com/UI5/webcomponents/releases/tag/v1.1.0) of **@ui5/webcomponents**. * @default "End" */ overflowMode?: OverflowMode | keyof typeof OverflowMode; /** * Defines the alignment of the content and the `additionalText` of a tab. * * **Note:** * The content and the `additionalText` would be displayed vertically by default, * but when set to `Inline`, they would be displayed horizontally. * @default "Standard" */ tabLayout?: TabLayout | keyof typeof TabLayout; } interface TabContainerDomRef extends Required<TabContainerAttributes>, Ui5DomRef { /** * Returns all slotted tabs and their subTabs in a flattened array. * The order of tabs is depth-first. */ readonly allItems: Array<ITab>; } interface TabContainerPropTypes extends TabContainerAttributes, Omit<CommonProps, keyof TabContainerAttributes | 'children' | 'overflowButton' | 'startOverflowButton' | 'onMove' | 'onMoveOver' | 'onTabSelect'> { /** * Defines the tabs. * * **Note:** Use `Tab` and `TabSeparator` for the intended design. * * __Supported Node Type/s:__ `Array<ITab>` */ children?: ReactNode | ReactNode[]; /** * Defines the button which will open the overflow menu. If nothing is provided to this slot, * the default button will be used. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="overflowButton"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<IButton>` */ overflowButton?: UI5WCSlotsNode; /** * Defines the button which will open the start overflow menu if available. If nothing is provided to this slot, * the default button will be used. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="startOverflowButton"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * **Note:** Available since [v1.1.0](https://github.com/UI5/webcomponents/releases/tag/v1.1.0) of **@ui5/webcomponents**. * * __Supported Node Type/s:__ `Array<IButton>` */ startOverflowButton?: UI5WCSlotsNode; /** * Fired when element is moved to the tab container. * * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onMove?: (event: Ui5CustomEvent<TabContainerDomRef, TabContainerMoveEventDetail>) => void; /** * Fired when element is being moved over the tab container. * * If the new position is valid, prevent the default action of the event using `preventDefault()`. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ✅|✅| */ onMoveOver?: (event: Ui5CustomEvent<TabContainerDomRef, TabContainerMoveEventDetail>) => void; /** * Fired when a tab is selected. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ✅|✅| */ onTabSelect?: (event: Ui5CustomEvent<TabContainerDomRef, TabContainerTabSelectEventDetail>) => void; } /** * The `TabContainer` represents a collection of tabs with associated content. * Navigation through the tabs changes the content display of the currently active content area. * A tab can be labeled with text only, or icons with text. * * ### Structure * * The `TabContainer` can hold two types of entities: * * - `Tab` - contains all the information on an item (text and icon) * - `TabSeparator` - used to separate tabs with a line * * ### Hierarchies * Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations * to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split * to allow the user to display the content or alternatively to expand / collapse the list of sub tabs. * * ### Keyboard Handling * * #### Fast Navigation * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up]. * In order to use this functionality, you need to import the following module: * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"` * * * * `import "@ui5/webcomponents/dist/Tab.js";` (for `Tab`) * * `import "@ui5/webcomponents/dist/TabSeparator.js";` (for `TabSeparator`) * * __Note:__ This is a UI5 Web Component! [TabContainer UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/TabContainer) | [Repository](https://github.com/UI5/webcomponents) */ declare const TabContainer: import("react").ForwardRefExoticComponent<TabContainerPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<TabContainerDomRef>>; export { TabContainer }; export type { TabContainerDomRef, TabContainerPropTypes };