Divider 구분선

콘텐츠를 구분하는 선입니다. 가로 / 세로 방향, 파선과 사용자 정의 테두리, 텍스트 정렬을 지원합니다.

구분선

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">가로 구분선</p>
    <LhDivider />
    <p class="demo-note">텍스트 포함 (기본 가운데)</p>
    <LhDivider>수묵</LhDivider>
    <LhDivider label-position="left">왼쪽 정렬 텍스트</LhDivider>
    <LhDivider label-position="right">오른쪽 정렬 텍스트</LhDivider>
    <p class="demo-note">파선 / 사용자 정의 테두리</p>
    <LhDivider dashed />
    <LhDivider border-style="dotted">점선</LhDivider>
    <p class="demo-note">세로 구분선</p>
    <div class="demo-row">
      <span>산수</span>
      <LhDivider direction="vertical" />
      <span>화조</span>
      <LhDivider direction="vertical" />
      <span>인물</span>
    </div>
  </div>
</template>

Props

프로퍼티	설명	타입	기본값
direction	방향	'horizontal' \| 'vertical'	'horizontal'
dashed	파선	boolean	false
labelPosition	텍스트 포함 시 정렬 위치 (가로 방향에만 적용, 세로는 항상 가운데)	'left' \| 'center' \| 'right'	'center'
borderStyle	테두리 스타일 (dashed보다 우선)	string	—
sx	sx 레이아웃 단축 프로퍼티	—	—

Slots

슬롯	설명
default	구분선 텍스트 (가로 방향일 때 좌우에, 세로 방향일 때 상하에 배치)