carbon-react
Version:
A library of reusable React components for easily building user interfaces.
69 lines (68 loc) • 2.82 kB
TypeScript
import React from "react";
import { MarginProps } from "styled-system";
import Tab from "./tab";
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
export type TabsHandle = {
/**
* Programmatically focus on a specific tab.
* @param tabId - The ID of the tab to focus. Must match the `tabId` prop of the target `Tab` component.
*/
focusTab: (tabId: string) => void;
} | null;
export interface TabsProps extends MarginProps, TagProps {
/** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
renderHiddenTabs?: boolean;
/** Allows manual control over the currently selected tab. */
selectedTabId?: string;
/** The child elements of Tabs need to be Tab components. */
children: React.ReactNode;
/**
* Sets the alignment of the tab titles. Possible values include.
* @deprecated In a future release, support for right-aligned tab content will be removed.
*/
align?: "left" | "right";
/** A callback for when a tab is changed. You can use this to manually control
* tab changing or to fire other events when a tab is changed.
*/
onTabChange?: (tabId: string) => void;
/**
* The position of the tab title.
* */
position?: "top" | "left";
/** Sets size of the tab titles. */
size?: "default" | "large";
/**
* Sets the divider of the tab titles header to extend the full width of the parent.
* @deprecated This prop will be deprecated in a future release
* */
extendedLine?: boolean;
/**
* Adds a combination of borders to the tab titles.
* @deprecated This prop will be deprecated in a future release
* */
borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
/** Adds an alternate styling variant to the tab titles. */
variant?: "default" | "alternate";
/** sets width to the tab headers. Can be any valid CSS string.
* The headerWidth prop works only for `position="left"`
*/
headerWidth?: string;
/** An object to support overriding validation statuses, when the Tabs have custom targets for example.
* The `id` property should match the `tabId`s for the rendered Tabs.
*/
validationStatusOverride?: {
[id: string]: {
error?: boolean;
warning?: boolean;
info?: boolean;
};
};
/**
* When this prop is set any string validation failures in the children of each Tab
* will be summarised in the Tooltip next to the Tab title
* @deprecated This prop will be deprecated in a future release
*/
showValidationsSummary?: boolean;
}
declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
export { Tabs, Tab };