Divider 구분선

콘텐츠를 구분하는 분할선입니다.

기본 사용법

봄물은 하늘보다 푸르고, 그린 배는 비 소리에 잠들었네.

노 가에서 사람은 달 같고, 하얀 손목은 서리와 눈 같았네.

왼쪽 정렬 그룹

오른쪽 정렬 그룹

세로

구분선

위

수묵

아래

import { LhDivider } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <span>봄물은 하늘보다도 푸르고, 화선은 빗소리를 들으며 잠듭니다.</span>
      <LhDivider />
      <span>술팔 곁의 사람은 달과 같고, 흰 손목은 서리눈처럼 맑습니다.</span>
      <LhDivider dashed />
      <LhDivider labelPosition="left">왼쪽 정렬 그룹</LhDivider>
    </>
  )
}

Divider Props

프로퍼티	설명	타입	선택 가능한 값	기본값
direction	방향	`'horizontal' \| 'vertical'`	—	`'horizontal'`
dashed	점선 여부	`boolean`	—	`false`
labelPosition	문구 위치 (가로 방향에서 적용, 세로일 때는 항상 가운데)	`'left' \| 'center' \| 'right'`	—	`'center'`
borderStyle	테두리 스타일 (명시적으로 지정 시 `dashed`보다 우선)	`string`	`'solid' \| 'dashed' \| 'dotted'` …	—
sx	빠른 레이아웃 프로퍼티	`SxProps`	—	—

접근성

문구가 있는 분할선은 role="separator"로 렌더링됩니다 (실제 그룹화 의미). 장식용만 있는 것은 role="presentation"으로 접근성 트리에서 제외됩니다. 「문구가 있으면서 세로」일 때만 aria-orientation="vertical"을 출력합니다.

알려진 동작

borderStyle="dotted"은 lh-divider--dotted 수식자를 출력하지만, 스타일 계층은 현재 --dashed만 구현되어 있어 실선으로 되돌아갑니다. lh-ui-plus의 동작과 동일합니다.

스타일

import '@lh-ui/react/style/divider'

기본 사용법​

Divider Props​

스타일​

기본 사용법

Divider Props

스타일