Separator
콘텐츠를 시각적으로 구분하는 구분선 컴포넌트
개요
Separator 컴포넌트는 base-ui의 Separator Primitive를 기반으로 콘텐츠 사이에 시각적 구분선을 제공합니다. 가로(horizontal) 및 세로(vertical) 방향을 지원합니다.
주요 특징
- ✅ 방향 제어: horizontal, vertical 방향 지원
- ✅ 시맨틱 마크업: base-ui Separator 기반으로
role="separator"자동 적용 - ✅ 접근성: ARIA 속성 자동 관리
- ✅ 디자인 토큰: 테마 커스터마이징 지원
사용 예시
가로 구분선
콘텐츠 블록 사이에 가로 구분선을 추가합니다.
Preview
제목
오픈소스 UI 컴포넌트 라이브러리
하단 콘텐츠
세로 구분선
인라인 요소 사이에 세로 구분선을 추가합니다.
Preview
Blog
Docs
Source
섹션 구분
카드나 리스트 내부에서 섹션을 나눕니다.
Preview
계정 설정
프로필 정보를 관리합니다.
알림 설정
알림 환경을 설정합니다.
보안
비밀번호와 인증을 관리합니다.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 구분선 방향 |
className | string | - | 추가 CSS 클래스 |
기본 사용법
import { Separator } from "@vortex/ui-foundation"
{
/* 가로 구분선 */
}
;<Separator />
{
/* 세로 구분선 */
}
;<Separator orientation="vertical" />접근성
시맨틱 마크업
- base-ui Separator 기반으로
role="separator"자동 적용 aria-orientation속성이 방향에 따라 자동 설정
권장 사항
- ✅ 콘텐츠 섹션 구분에 사용
- ✅ 세로 구분선 사용 시 부모에 충분한 높이 확보
- ❌ 장식 목적만으로 과도하게 사용하지 않기
관련 컴포넌트
Last updated on