@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
76 lines (75 loc) • 2.51 kB
TypeScript
import { Tabs as TabsPrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
/**
* A tabs component for organizing content into multiple panels.
* Built on top of [radix-ui Tabs](https://www.radix-ui.com/primitives/docs/components/tabs).
*
* @example
* ```tsx
* <Tabs defaultValue="account">
* <TabsList>
* <TabsTrigger value="account">Account</TabsTrigger>
* <TabsTrigger value="password">Password</TabsTrigger>
* </TabsList>
* <TabsContent value="account">
* <p>Account settings</p>
* </TabsContent>
* <TabsContent value="password">
* <p>Password settings</p>
* </TabsContent>
* </Tabs>
* ```
*
*
* @example
* ```tsx
* // Tabs as links
* <Tabs defaultValue="account">
* <TabsList>
* <TabsTrigger value="account" asChild>
* <Link href="/account">Account</Link>
* </TabsTrigger>
* </TabsList>
* <TabsContent value="account">
* <p>Account settings</p>
* </TabsContent>
* </Tabs>
* ```
*/
export declare const Tabs: import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>;
interface TabsListContextProps {
/**
* When set to true, expands the tabs navigation to occupy the full available width.
*
* This is useful for creating a more balanced layout when your tabs container
* spans the full width of its parent. Tab items will be distributed
* evenly across the available space.
*
* @default false - By default, tabs will only take up as much space as needed.
*/
grow?: boolean;
}
interface TabsListProps extends ComponentProps<typeof TabsPrimitive.List>, TabsListContextProps {
}
/**
* Container for Tab's triggers.
*
* @example
* ```tsx
* <TabsList>
* <TabsTrigger value="account">Account</TabsTrigger>
* <TabsTrigger value="password">Password</TabsTrigger>
* </TabsList>
* ```
*/
export declare const TabsList: ({ className, grow, ...props }: TabsListProps) => import("react").JSX.Element;
/**
* Trigger for a single tab. Should be wrapped with {@link TabsList}`.
* Can be rendered as a link using asChild.
*/
export declare const TabsTrigger: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) => import("react").JSX.Element;
/**
* Displays content of currently active tab. Only one tab can be active at once.
*/
export declare const TabsContent: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) => import("react").JSX.Element;
export {};