Themes
Advanced
Utils
Components

Separator

시각적으로 또는 의미적으로 콘텐츠를 구분합니다.

View sourceReport an issueView in Playground
Tools for building high-quality, accessible UI.
ThemesPrimitivesIconsColors
<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>

API Reference

이 컴포넌트는 Separator primitive에서 props를 상속받으며, common margin props를 지원합니다.

PropTypeDefault
orientation
Responsive<"horizontal" | "vertical">
"horizontal"
size
Responsive<"1" | "2" | "3" | "4">
"1"
color
enum
"gray"
decorative
boolean
true

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>
PreviousSelect
NextSkeleton
Edit this page on GitHub.