Separator

Separator

콘텐츠를 시각적으로 또는 의미적으로 구분해 주는 컴포넌트예요.

출처: 문서

본문

가로 또는 세로 구분선을 그려서 콘텐츠 사이를 나누는 데 사용해요.

<Text size="2">
  Tools for building high-quality, accessible UI.
  <Separator my="3" size="4" />
  <Flex gap="3" align="center">
    Themes
    <Separator orientation="vertical" />
    Primitives
    <Separator orientation="vertical" />
    Icons
    <Separator orientation="vertical" />
    Colors
  </Flex>
</Text>

이 컴포넌트는 Separator primitive의 props를 상속받으며, 공통 margin props를 지원해요.

예시 (Examples)

Size

size prop으로 구분선의 크기를 제어할 수 있어요. 가장 큰 단계는 컨테이너의 전체 너비 또는 높이를 차지해요.

<Flex direction="column" gap="4">
  <Separator orientation="horizontal" size="1" />

  <Separator orientation="horizontal" size="2" />

  <Separator orientation="horizontal" size="3" />

  <Separator orientation="horizontal" size="4" />
</Flex>

<Flex align="center" gap="4" height="96px">
  <Separator orientation="vertical" size="1" />

  <Separator orientation="vertical" size="2" />

  <Separator orientation="vertical" size="3" />

  <Separator orientation="vertical" size="4" />
</Flex>

Color

color prop으로 특정 색상을 지정할 수 있어요.

<Flex direction="column" gap="3">
  <Separator color="indigo" size="4" />

  <Separator color="cyan" size="4" />

  <Separator color="orange" size="4" />

  <Separator color="crimson" size="4" />
</Flex>

Orientation

orientation prop으로 구분선이 가로인지 세로인지를 제어할 수 있어요.

<Flex align="center" gap="4">
  <Separator orientation="horizontal" />

  <Separator orientation="vertical" />
</Flex>

더 알아보기 (Learn more)

• 세로 구분선은 내비게이션이나 목록 항목 사이를 시각적으로 구분할 때 유용해요.