import { Canvas, Meta, Controls } from '@storybook/addon-docs';
import * as TabsStories from './Tabs.stories';

# Tabs

<Meta of={TabsStories} />

<br />

## Overview

관련성 있는 콘텐츠들의 집합으로, 하나를 활성화하여 표시합니다.

<Canvas of={TabsStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>Tabs</strong> 컴포넌트 사용방법 입니다.

```javascript
import { Tabs } from '@lotte-innovate/lui';

    <Tabs.Root default-value="tab1" v-bind="args">
        <Tabs.List aria-label="Manage your account">
            <Tabs.Indicator></Tabs.Indicator>
            <Tabs.Trigger value="tab1" >
                <Text> Account <Text>
            </Tabs.Trigger>
            <Tabs.Trigger value="tab2" >
                <Text>Password<Text>
            </Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content class="grow p-5" value="tab1">
            <Text size="2">
                Make changes to your account here. Click save when you're done.
            </Text>
        </Tabs.Content>
        <Tabs.Content class="grow p-5" value="tab2">
            <Text size="2">
                Change your password here. After saving, you'll be logged out.
            </Text>
        </Tabs.Content>
  </Tabs.Root>
```

<br />

## API Reference

### Root

Tab 구성요소가 포함되어있습니다.

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>defaultValue</td>
    <td>string</td>
    <td>defaultValue를 나타냅니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>value</td>
    <td>string</td>
    <td>값을 나타냅니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>onValueChange</td>
    <td>function</td>
    <td>값 변경 이벤트 핸들러입니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>orientation</td>
    <td>"horizontal" | "vertical" | undefined</td>
    <td>Tab 요소의 방향입니다.</td>
    <td>"horizontal"</td>
  </tr>
</table>
### List

Tab의 가장자리에 따라 Trigger 구성요소를 포함하는 리스트입니다.

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>size</td>
    <td>"small" | "medium"</td>
    <td>크기를 나타냅니다.</td>
    <td>"medium"</td>
  </tr>
</table>

### Trigger

관련 Content를 활성화하는 버튼입니다.

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>value*</td>
    <td>string</td>
    <td>Trigger와 Content를 연결하는 고유의 값입니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>boolean</td>
    <td>값을 나타냅니다.</td>
    <td>false</td>
  </tr>
</table>
### Content

각 Trigger와 관련된 Content를 포함합니다.

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>value*</td>
    <td>string</td>
    <td>Trigger와 Content를 연결하는 고유의 값입니다.</td>
    <td></td>
  </tr>
</table>

## Variant

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `medium` 입니다.