Separator
가로 섹션과 세로 컨트롤 그룹을 나누는 의미 있는 구분선이에요.
핵심 속성
TRSeparator는 의미 있는 경계를 role="separator"로 표시해요. orientation은 horizontal 또는 vertical을 받고 기본값은 horizontal이에요. 콘텐츠를 나누지 않고 순수하게 장식으로만 쓰는 선에는 role="presentation"을 사용하세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/separator.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRSeparator } from '@tinyrack/ui/components/separator';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
의미 있는 구분선과 장식용 구분선 고유 링크
콘텐츠 경계에는 기본 역할을 유지하세요. 시각적 용도로만 쓰는 선에서는 구분선 시맨틱을 제거하세요.
API
방향과 의미
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | 시각적 방향과 구분선의 aria-orientation을 설정해요. |
role | React.AriaRole | 'separator' | 순수한 장식용 선에는 presentation을 사용해요. 이 경우 구분선 전용 방향 ARIA가 생략돼요. |
render | ReactElement | <div /> | 구분선 동작과 클래스를 유지하면서 렌더링 요소를 교체해요. |
합성과 스타일
네이티브 <div> 속성과 className, style, ref를 모두 전달해요. --tr-separator-color, --tr-separator-thickness, --tr-separator-min-length로 모양을 조정할 수 있어요.