import { Canvas, Meta, Controls } from '@storybook/addon-docs'
import * as CollapsibleStories from './Collapsible.stories'

# Collapsible

<Meta of={CollapsibleStories} />

<br />

## Overview

패널을 확장/축소하는 인터렉티브 컴포넌트입니다.

<Canvas of={CollapsibleStories.Default} />

<br />

## Usage

<strong>Collapsible</strong> 아래 조합으로 이루어져 있습니다.

```tsx
<CollapsibleRoot v-model:open="open" class="w-[300px]">
  <div style="display: flex; align-items: center; justify-content: space-between">
    <span class="text-[15px] text-black leading-[25px]"> @peduarte starred 3 repos </span>
    <CollapsibleTrigger class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center bg-black text-white">
      <Icon v-if="open" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
      <Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent>
    <div class=" rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
      <span class="text-black text-[15px] leading-[25px]">@vuejs/core</span>
    </div>
  </CollapsibleContent>
</CollapsibleRoot>
```

<br />

## API Reference

### Root

Collapsible의 모든 부분을 포함합니다.

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>defaultOpen</td>
    <td>boolean</td>
    <td>처음 랜더링 시 판넬의 열린 상태값 입니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>open</td>
    <td>boolean</td>
    <td>판넬의 열린 상태값 입니다.</td>
    <td>```false```</td>
  </tr>
  <tr>
    <td>onOpenChange</td>
    <td>(open: boolean) => void</td>
    <td>판넬의 열고 닫는 이벤트를 감지하는 이벤트 핸들러입니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>boolean</td>
    <td>```true``` 인 경우 모든 상호작용을 제어합니다.</td>
    <td>```false```</td>
  </tr>
</table>

### Trigger

항목을 접었다가 펼 수 있는 버튼입니다.

### Content

항목의 콘텐츠를 포함합니다.