@navinc/base-react-components/dist/tab-group.d.ts

Nav's Pattern Library

import { ReactElement } from 'react';
import { InferComponentProps } from './types.js';
/** @deprecated use the wayfinder tabs from @navinc/base-react-components/wayfinder instead */
export declare const TabGroupContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
/** @deprecated use the wayfinder tabs from @navinc/base-react-components/wayfinder instead */
export declare const Tab: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("styled-components").FastOmit<{
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, "bold" | "light" | "size" | keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement> | "boldType" | "$bold"> & {
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, {
    isActive?: boolean;
}>> & string;
type TabGroupProps = InferComponentProps<typeof TabGroupContainer> & {
    children?: ReactElement[];
};
/**
 * @deprecated use the wayfinder tabs from @navinc/base-react-components/wayfinder instead
Wraps and positions tabs created from child elements. Placed at the top of a card to allow users to change the state/view of the card.

Create tabs by passing in child elements to a `TabGroup`.
For each child use the `isActive` flag to control the conditions
when active styling should be applied.

#### Usage:

For instance where the URL should not change in the case of a filter,
you can use `isActive` and an `onClick` to change the content of the page.

```
<TabGroup>
  <FilterLink
    isActive={alertsListFilter === 'ALL_ALERTS'}
    onClick={this.setAlertsFilter('ALL_ALERTS')}>
    All Alerts
  </FilterLink>

  <FilterLink
    isActive={alertsListFilter === 'BUSINESS'}
    onClick={this.setAlertsFilter('BUSINESS')}>
    Business
  </FilterLink>
<TabGroup>
```

 **/
export declare const TabGroup: ({ children, ...props }: TabGroupProps) => import("react/jsx-runtime").JSX.Element;
export {};