158 lines
3.2 KiB
Plaintext
158 lines
3.2 KiB
Plaintext
---
|
|
title: Tabs
|
|
description: A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="tabs-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="tabs" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<Tabs>
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContents>
|
|
<TabsContent value="tab1">Content 1</TabsContent>
|
|
<TabsContent value="tab2">Content 2</TabsContent>
|
|
</TabsContents>
|
|
</Tabs>
|
|
```
|
|
|
|
## Props
|
|
|
|
### Tabs
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the tabs',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
className: {
|
|
description: 'The className of the tabs',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
defaultValue: {
|
|
description: 'The default value of the tabs',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
onValueChange: {
|
|
description: 'The function to handle the value change',
|
|
type: '(value: string) => void',
|
|
required: false,
|
|
},
|
|
value: {
|
|
description: 'The value of the tabs',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### TabsList
|
|
|
|
<TypeTable
|
|
type={{
|
|
activeClassName: {
|
|
description: 'The className of the active tab',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
children: {
|
|
description: 'The children of the tabs list',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
className: {
|
|
description: 'The className of the tabs list',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
transition: {
|
|
description: 'The transition of the tabs list',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: '{ type: "spring", stiffness: 200, damping: 25 }',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### TabsTrigger
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the tabs trigger',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
className: {
|
|
description: 'The className of the tabs trigger',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
value: {
|
|
description: 'The value of the tabs trigger',
|
|
type: 'string',
|
|
required: true,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### TabsContents
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the tabs contents',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
className: {
|
|
description: 'The className of the tabs contents',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
transition: {
|
|
description: 'The transition of the tabs contents',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: '{ duration: 0.4, ease: "easeInOut" }',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### TabsContent
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the tabs content',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
className: {
|
|
description: 'The className of the tabs content',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
value: {
|
|
description: 'The value of the tabs content',
|
|
type: 'string',
|
|
required: true,
|
|
},
|
|
}}
|
|
/>
|