# Divider
URL: /lynx/components/divider
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/divider.mdx

콘텐츠 영역을 시각적으로 구분하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.5.0, @seed-design/lynx-css@0.8.1

## Preview

```tsx
import "./styles";

import { Divider } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="divider-preview">
      <text className="divider-preview__text">
        Nisi elit pariatur incididunt quis fugiat mollit ipsum fugiat duis culpa esse incididunt
        cupidatat.
      </text>
      <Divider />
      <text className="divider-preview__text">Consectetur voluptate quis do culpa et culpa.</text>
    </view>
  );
}
```

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

## Props

## Usage

```tsx
import { Divider } from "@seed-design/lynx-react";
```

```tsx
<Divider />
```

## Screen Reader Behavior

Divider는 기본적으로 접근성 트리에 포함되며 구분선으로 읽힙니다. 장식용이라면 `accessibility-element={false}`를 지정하세요.

## Examples

### Orientation

`orientation="vertical"`을 사용하면 부모가 구분선의 높이를 정해야 합니다.

```tsx
import "./styles";

import { Divider } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="divider-example divider-example--column">
      <view className="divider-example__vertical-stack">
        <view className="divider-example__block" />
        <Divider />
        <view className="divider-example__block" />
      </view>
      <view className="divider-example__horizontal-stack">
        <view className="divider-example__block" />
        <Divider orientation="vertical" />
        <view className="divider-example__block" />
      </view>
    </view>
  );
}
```

### Inset

`inset`은 구분선 양끝에 16px 간격을 추가합니다.

```tsx
import "./styles";

import { Divider } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="divider-example divider-example--column">
      <view className="divider-example__vertical-stack">
        <view className="divider-example__block" />
        <Divider inset />
        <view className="divider-example__block" />
      </view>
      <view className="divider-example__horizontal-stack">
        <view className="divider-example__block" />
        <Divider orientation="vertical" inset />
        <view className="divider-example__block" />
      </view>
    </view>
  );
}
```

## Web Version Differences

- native `<view>`를 렌더링하며 Lynx 접근성 속성을 사용합니다.
- 세로 Divider의 방향은 접근성 트리에 별도로 노출되지 않습니다.
- 세로 Divider는 부모가 높이를 지정해야 합니다.

## Unsupported Lynx Features

- 웹의 `as` prop을 지원하지 않습니다.
- 접근성 노출 여부는 `accessibility-element`로 조정합니다.