Divider 구분선

콘텐츠를 구분하는 구분선입니다. 글자가 있으면 그룹화 시맨틱(role="separator")을 가지며, 순수 장식일 때는 접근성 트리에 나타나지 않습니다.

기본 사용법

기본 사용법

윗부분 내용

아랫부분 내용

<script setup lang="ts">
</script>

<template>
  <LhDivider />
</template>

<script>
export default {}
</script>

<template>
  <LhDivider />
</template>

수직 구분선

수직 구분선

홈

목록

상세

<script setup lang="ts">
</script>

<template>
  <!-- 수직 구분선 -->
  <div>
    <span>홈</span>
    <LhDivider direction="vertical" />
    <span>목록</span>
    <LhDivider direction="vertical" />
    <span>상세</span>
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- 수직 구분선 -->
  <div>
    <span>홈</span>
    <LhDivider direction="vertical" />
    <span>목록</span>
    <LhDivider direction="vertical" />
    <span>상세</span>
  </div>
</template>

글자 포함

글자는 수평과 수직 방향을 지원합니다. 수평 방향은 label-position으로 좌우 정렬을 제어하고, 수직 방향은 항상 가운데 정렬됩니다.

글자 포함

소년 시절, 누각 위에서 빗소리를 듣고

장년 시절, 객선에서 빗소리를 듣고

지금은 스님의 오두막 아래서 빗소리를 듣네

<script setup lang="ts">
</script>

<template>
  <LhDivider label-position="left">소년 시절, 누각 위에서 빗소리를 듣고</LhDivider>
  <LhDivider>장년 시절, 객선에서 빗소리를 듣고</LhDivider>
  <LhDivider label-position="right">지금은 스님의 오두막 아래서 빗소리를 듣네</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider label-position="left">소년 시절, 누각 위에서 빗소리를 듣고</LhDivider>
  <LhDivider>장년 시절, 객선에서 빗소리를 듣고</LhDivider>
  <LhDivider label-position="right">지금은 스님의 오두막 아래서 빗소리를 듣네</LhDivider>
</template>

점선

점선

점선과 글자를 조합할 수 있습니다

커스텀 테두리 스타일(dotted)

<script setup lang="ts">
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>점선과 글자를 조합할 수 있습니다</LhDivider>
  <LhDivider border-style="dotted">커스텀 테두리 스타일(dotted)</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>점선과 글자를 조합할 수 있습니다</LhDivider>
  <LhDivider border-style="dotted">커스텀 테두리 스타일(dotted)</LhDivider>
</template>

Divider API

Props

속성	설명	타입	기본값
direction	구분선 방향	"horizontal" | "vertical"	'horizontal'
dashed	점선 여부	boolean	false
labelPosition	글자가 있을 때 정렬 위치(수평 방향에만 적용, 수직은 항상 가운데)	"left" | "center" | "right"	'center'
borderStyle	테두리 스타일(예: 'dotted'), 예약됨	string	—
sx	빠른 레이아웃 속성(예: { mt: 2, w: '50%' }), 인라인 스타일로 변환되어 루트 요소에 적용	LhSxProps	—

Slots

슬롯	설명	기본 내용
default	구분선 글자(수평 방향은 좌우에, 수직 방향은 상하에 배치)	—

접근성

• 글자 포함: role="separator", 스크린 리더가 그룹 경계를 인식합니다. 수직 방향은 추가로 aria-orientation="vertical"을 선언합니다
• 순수 장식: role="presentation"으로 접근성 트리에서 제거합니다
• 포커스 불가, 키보드 인터랙션 없음

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/divider/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhDividerProps

export interface LhDividerProps {
  /** 구분선 방향 */
  direction?: LhDividerDirection
  /** 점선 여부 */
  dashed?: boolean
  /** 글자가 있을 때 정렬 위치 */
  labelPosition?: LhDividerLabelPosition
  /** 테두리 스타일(예: 'solid' / 'dashed' / 'dotted'), dashed보다 우선 */
  borderStyle?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhDividerLabelPosition _{(@lh-ui/share/core/divider에서 가져옴)}

/** 글자가 있을 때 정렬 위치 */
export type LhDividerLabelPosition = 'left' | 'center' | 'right'

LhDividerDirection _{(@lh-ui/share/core/divider에서 가져옴)}

/** 구분선 방향 */
export type LhDividerDirection = 'horizontal' | 'vertical'