Divider

콘텐츠를 시각적·의미적으로 구분하는 구분선입니다. 단순 선·점선·텍스트 레이블·세로 구분을 유틸리티 클래스로 조합합니다.

기본

divider 클래스로 가로 구분선을 그립니다. hr 또는 div에 사용할 수 있습니다.

위 콘텐츠

아래 콘텐츠

divider_dashed로 점선 스타일을 적용합니다.

위 콘텐츠

아래 콘텐츠

요소 안에 텍스트가 있으면 양쪽 선과 가운데 레이블로 자동 전환됩니다.

섹션 제목

보조 설명

divider_orient-left · divider_orient-right로 레이블 위치를 조정합니다. 기본은 가운데입니다.

왼쪽

가운데

오른쪽

divider_vertical은 인라인·flex 행 안에서 세로 구분선으로 사용합니다. 스크린리더에는 세로 separator로 전달됩니다. 장식용으로만 사용할 때는 aria-hidden을 true로 지정합니다.

항목 A항목 B항목 C

Prop	타입	기본값	설명
`dashed`	boolean	false	점선 스타일 (divider_dashed)
`plain`	boolean	false	레이블 보조 톤 (divider_plain)
`vertical`	boolean	false	세로 구분선 (divider_vertical)
`orient`	'left' \| 'right'	—	레이블 정렬. 생략 시 가운데
`label`	string	—	가운데 레이블 텍스트. default 슬롯으로 대체 가능
`tag`	'auto' \| 'hr' \| 'div' \| 'span'	auto	루트 태그. auto는 vertical·레이블 유무에 따라 hr · div · span 선택

슬롯	설명
`default`	레이블 텍스트 (label prop 대체)

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`divider`	가로·세로 구분선 루트
`divider_dashed`	점선 스타일
`divider_plain`	보조 톤 레이블
`divider_vertical`	세로 구분선 (인라인·flex 행)
`divider_orient-left · divider_orient-right`	레이블 좌·우 정렬
`role="separator"`	hr가 아닌 루트에 자동 적용되는 구분선 역할
`aria-orientation="vertical"`	vertical일 때 자동 적용되는 세로 방향 정보