@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
44 lines (43 loc) • 2.06 kB
TypeScript
import { HTMLAttributes, JSX } from 'react';
import { IconName, SelectedAriaAttributes } from '../../types';
import { TabListAriaAttributes } from '../Tabs/TabList/TabList.utils';
import { NavigationTabsAlignment } from './NavigationTabs.utils';
export interface NavigationTab {
/** Unique id for the NavigationTab. */
id: string;
/** Link component to be used for the navigation. */
linkComponent: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
onClick?: () => void;
to?: string;
}>;
/** Name of the icon to display */
iconName?: IconName;
/** Number Indicator value displayed next to the label. */
numberIndicatorValue?: string;
}
export interface NavigationTabsProps extends HTMLAttributes<HTMLDivElement> {
/** ARIA attributes to ensure accessibility
* `{'aria-label'? string;`
* `'aria-labelledby'?: string;}`
* */
aria: SelectedAriaAttributes<TabListAriaAttributes>;
/** NavigationTab array structure with optional and required parameters
* `{ id: string;`
* `linkComponent: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & { onClick?: () => void; to?: string; }>;`
* `iconName?: IconName;`
* `numberIndicatorValue?: string; }[]`
*/
tabs: NavigationTab[];
/** Index of the tab that should be active. */
activeTabIndex?: number;
/** Alignment of the NavigationTabs.
* @default 'left'
*/
alignment?: NavigationTabsAlignment;
}
/**
* The Navigation Tabs component is a link list and often used as secondary navigation. The components main function is to navigate to another page url.
*
* Design in Figma: [Navigation Tabs](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=24564-335&t=UBsmFURFENnuYSW1-11)
*/
export declare const DSNavigationTabs: ({ aria, tabs, activeTabIndex, alignment, className, ...rest }: NavigationTabsProps) => JSX.Element;