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

<Meta of={AspectRatioStories} />

# AspectRatio

원하는 비율로 콘텐츠를 표시하는 컴포넌트 입니다.

<Canvas of={AspectRatioStories.Default} />

<Controls />

<br />

## Usage

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

```vue
import { AspectRatio } from '@lotte-innovate/lui-vue';

<template>
  <AspectRatio />
</template>
```

<br />

## API Reference

### Root

지정된 비율로 제한하려는 콘텐츠를 포함합니다

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>ratio</td>
      <td>boolean</td>
      <td>원하는 비율을 지정합니다.</td>
      <td>number</td>
    </tr>
  </tbody>
</table>

## Variant

### Ratio Props

<code>ratio</code> props는 컴포넌트의 `width/height` 비율을 나타닙니다.

기본 값은 `16 / 9` 입니다.

<Canvas of={AspectRatioStories.Ratio} />

<br />

### Scaling Props

<code>scaling</code> props는 컴포넌트의 비율을 변경합니다.

기본 값은 `100%` 입니다.

<Canvas of={AspectRatioStories.Scaling} />