82 lines
2.3 KiB
Plaintext
82 lines
2.3 KiB
Plaintext
import { Button } from "@components/Button";
|
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
|
import { Story } from "@/components/Story";
|
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
|
import { TabsDemo } from "./TabsBlocks/Preview";
|
|
|
|
# Tabs
|
|
Organizes content into multiple sections with tabbed navigation.
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered" className="flex-col [&>*]:w-full">
|
|
<TabsDemo />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TabsBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
## Installation
|
|
|
|
1. Create a new file `Tabs.tsx` in your component folder.
|
|
2. Copy and paste the following code into the file.
|
|
|
|
<LoadedCode from={`${GITHUB}/packages/react/components/Tabs.tsx`} />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
|
```
|
|
|
|
```html
|
|
<TabProvider defaultName="tab1">
|
|
<TabList>
|
|
<TabTrigger name="tab1">Tab 1</TabTrigger>
|
|
<TabTrigger name="tab2">Tab 2</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="tab1">
|
|
<div>Tab 1 Content</div>
|
|
</TabContent>
|
|
<TabContent name="tab2">
|
|
<div>Tab 2 Content</div>
|
|
</TabContent>
|
|
</TabProvider>
|
|
```
|
|
|
|
> Note:
|
|
>
|
|
> TabContent requires a element as children, with className prop.
|
|
> It will add `hidden` tailwind classname if the tab is not active.
|
|
> There is no default element in the tab, so you have to provide it.
|
|
|
|
## Props
|
|
|
|
### TabProvider
|
|
|
|
#### Special
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `defaultName` | `string` | - (**required**) | The name of the tab to be active by default. |
|
|
|
|
### TabTrigger
|
|
|
|
#### Special
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `name` | `string` | - (**required**) | The name of the tab. |
|
|
| `asChild` | `boolean` | `false` | Whether the element is rendered as a child of a component |
|
|
|
|
### TabContent
|
|
|
|
#### Special
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `name` | `string` | - (**required**) | The name of the tab. |
|