Separator
Separator (구분선)
Separator는 콘텐츠를 시각적으로 구분할 때 사용하는 컴포넌트예요. 가로 또는 세로로 선을 그려 콘텐츠를 나눠줘요.
출처: 문서
본문
사용법 (Usage)
import { Separator } from "@chakra-ui/react"
<Separator />
예시 (Examples)
변형 (Variants)
variant prop을 사용해 구분선의 외형을 바꿀 수 있어요.
크기 (Sizes)
size prop을 사용해 구분선의 크기를 바꿀 수 있어요.
레이블 (Label)
label prop을 사용해 구분선에 레이블을 추가할 수 있어요.
세로 (Vertical)
orientation prop을 사용해 구분선의 방향을 바꿀 수 있어요.
반응형 방향 (Responsive Orientation)
화면 크기에 따라 orientation 속성을 바꾸는 예시예요.
:::note
orientation prop이 반응형 값일 때, 구분선은 aria-orientation 없이 렌더링되고 role이 presentation으로 설정돼요.
:::
Props
Separator 컴포넌트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.