Separator
콘텐츠 사이의 시각적 또는 의미적 경계를 만듭니다.
- 성숙도
- 후보
- 소스 경로
components/ui/separator.tsx- 소스
- 소스
실제 미리보기
A
B
B
사용할 때
사용 기준
간격만으로 관계를 구분하기 어려운 행과 구간 사이에 씁니다.
사용하지 않을 때
모든 요소를 선으로 둘러싸거나 의미 없는 장식으로 반복하지 않습니다.
변형과 상태
decorative고정 예시보조 기술에서 숨겨진 1px 선인지 확인합니다.
ABhorizontal고정 예시의미 있는 가로 경계가 hr로 노출되는지 확인합니다.
A
Bvertical고정 예시세로 경계의 orientation이 전달되는지 확인합니다.
AB
접근성
기본은 장식으로 숨기고 구분 자체가 의미일 때만 separator로 노출합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
decorative | boolean | 아니요 | 기본값 true이며 보조 기술에서 숨깁니다. |
orientation | "horizontal" | "vertical" | 아니요 | 선의 방향입니다. |
사용 예시
지원 importimport { Separator } from "@/components/ui/separator"
<Separator decorative={false} />