Divider

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Lynx 예제를 불러오는 중입니다.

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 install @seed-design/lynx-react @seed-design/lynx-css

pnpm add @seed-design/lynx-react @seed-design/lynx-css

yarn add @seed-design/lynx-react @seed-design/lynx-css

bun add @seed-design/lynx-react @seed-design/lynx-css

Props

Prop

Type

Usage

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

<Divider />

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

Examples

Orientation

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

Lynx 예제를 불러오는 중입니다.

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 간격을 추가합니다.

Lynx 예제를 불러오는 중입니다.

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로 조정합니다.

Divider

목차