@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
71 lines (70 loc) • 3.22 kB
TypeScript
import type { BaseProps } from '../../BaseProps';
import type { SelectedAriaAttributes, TabsBarAriaAttribute, TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
export type PTabsBarProps = BaseProps & {
/**
* Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state.
*/
activeTabIndex?: number | undefined;
/**
* Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`.
*/
aria?: SelectedAriaAttributes<TabsBarAriaAttribute>;
/**
* Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
* @default 'none'
*/
background?: TabsBarBackground;
/**
* Reduces the tab height and padding for use in dense layouts where vertical space is limited.
*/
compact?: boolean;
/**
* Emitted when the user clicks a different tab, carrying the new `activeTabIndex` in the event detail.
*/
onUpdate?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
/**
* Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
* @default 'small'
*/
size?: BreakpointCustomizable<TabsBarSize>;
/**
* @deprecated Will be removed in the next major release. Has no effect anymore.
* @default 'regular'
*/
weight?: TabsBarWeight;
};
export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
/**
* Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state.
*/
activeTabIndex?: number | undefined;
/**
* Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`.
*/
aria?: SelectedAriaAttributes<TabsBarAriaAttribute>;
/**
* Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
* @default 'none'
*/
background?: TabsBarBackground;
/**
* Reduces the tab height and padding for use in dense layouts where vertical space is limited.
*/
compact?: boolean;
/**
* Emitted when the user clicks a different tab, carrying the new `activeTabIndex` in the event detail.
*/
onUpdate?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
/**
* Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
* @default 'small'
*/
size?: BreakpointCustomizable<TabsBarSize>;
/**
* @deprecated Will be removed in the next major release. Has no effect anymore.
* @default 'regular'
*/
weight?: TabsBarWeight;
} & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;