@wix/design-system
Version:
@wix/design-system
56 lines • 2.02 kB
TypeScript
import * as React from 'react';
import { ValuesOf } from '../utils/typeUtils';
import { TYPE, SIZE, ALIGNMENT } from './Tabs.constants';
import { HorizontalScrollCommonProps } from '../common';
export type TabsProps = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook?: string;
/** Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className?: string;
/** A selected tab id */
activeId?: string | number;
/** If true, places a divider on bottom */
showDivider?: boolean;
/** @deprecated use showDivider instead */
hasDivider?: boolean;
/** An array of tabs */
items: Item[];
/** A minimum width of the container */
minWidth?: string | number;
/** Control text alignment in tab item */
alignment?: TabsAlignment;
/** One of: '', compact, compactSide, uniformSide, uniformFull */
type?: TabsType;
/** One of: medium, small */
size?: 'small' | 'medium';
/** Can be either string or renderable node */
sideContent?: React.ReactNode;
/** A specific width of a tab (only for uniformSide type) */
width?: string | number;
/** Click event handler */
onClick?: (item: Item) => void;
/** Wraps overflowing content within a scrollable container.
* @default false
*/
scrollOnOverflow?: boolean;
/** Allows to pass all common horizontal scroll props.
* @linkTypeTo components-mechanisms--horizontalscroll
* @setTypeName HorizontalScrollCommonProps
*/
horizontalScrollProps?: HorizontalScrollCommonProps;
};
export type Item = {
id: string | number;
title: React.ReactNode;
minWidth?: number;
maxWidth?: number;
dataHook?: string;
prefix?: React.ReactNode;
suffix?: React.ReactNode;
};
export type TabsType = ValuesOf<typeof TYPE>;
export type TabsSize = ValuesOf<typeof SIZE>;
export type TabsAlignment = ValuesOf<typeof ALIGNMENT>;
//# sourceMappingURL=Tabs.types.d.ts.map