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

# Breadcrumb

<Meta of={BreadcrumbStories} />

<br />

링크 계층을 사용하여 현재 리소스의 경로를 표시합니다.

<Canvas of={BreadcrumbStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <BreadcrumbRoot>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink />
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage />
      </BreadcrumbItem>
    </BreadcrumbList>
  </BreadcrumbRoot>
</template>;
```

<br />

## API Reference

### Root

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

### List

`Item`을 그룹화 할 때 사용합니다.

### Item

`Breadcrumb` 내의 각 항목을 나타냅니다.

### Link

`Item`에 클릭이 가능한 링크를 추가합니다.

### Separator

구분선을 보여줄 때 사용합니다.

### Page

현재 페이지를 강조할 때 사용합니다.

### Ellipsis

중간 항목들을 생략하고 "..."으로 표시할 때 사용합니다.

```javascript
<BreadcrumbRoot>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage />
    </BreadcrumbItem>
  </BreadcrumbList>
</BreadcrumbRoot>
```

## Variant

### Scaling Props

`scaling` props는 컴포넌트의 비율을 변경합니다.

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

<Canvas of={BreadcrumbStories.Scaling} />

### Size Props

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

기본 값은 `medium` 입니다.

<Canvas of={BreadcrumbStories.Size} />

### With Icon

경로에 아이콘을 넣을 수 있습니다.

```javascript
<BreadcrumbRoot>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbPage>아이콘</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</BreadcrumbRoot>
```

<Canvas of={BreadcrumbStories.WithIcon} />