Themes
Advanced
Utils
Theme

Radius

테마에서 적절한 반경 설정을 선택하는 방법.

Theme setting

테마 radius 설정은 구성 요소에 적용되는 반경 계수를 관리합니다:

<Theme radius="medium">

	<TextField.Root size="3" placeholder="Reply…">

		<TextField.Slot side="right" px="1">

			<Button size="2">Send</Button>

		</TextField.Slot>

	</TextField.Root>

</Theme>
none
small
medium
large
full

결과적인 border-radius는 맥락에 따라 다르며, 구성 요소에 따라 다르게 나타납니다. 예를 들어, full로 설정하면 Button은 알약 모양이 되지만, Checkbox는 완전히 둥글게 되지 않도록 하여 Radio와 혼동되지 않도록 합니다.

<Theme radius="full">

	<Flex align="center" gap="3">

		<Button>Save</Button>

		<Switch defaultChecked />

		<Checkbox defaultChecked />

	</Flex>

</Theme>

Radius overrides

일부 구성 요소는 자체 radius prop을 사용하여 반경 계수를 오버라이드할 수 있습니다.

<Flex align="center" gap="3">

	<Button radius="none">Save</Button>

	<Button radius="small">Save</Button>

	<Button radius="medium">Save</Button>

	<Button radius="large">Save</Button>

	<Button radius="full">Save</Button>

</Flex>

패널을 렌더링하는 구성 요소(예: Card, Dialog, Popover 등)는 radius prop을 가지지 않지만, 테마에서 반경 설정을 상속받습니다. 대부분의 텍스트 기반 구성 요소에서는 radius prop을 사용할 수 없습니다.

Radius scale

구성 요소에서 사용되는 반경 값은 6단계 스케일에서 파생됩니다.

1
2
3
4
5
6

특정 구성 요소에서 특정 단계를 직접 사용할 수는 없지만, radius prop은 반경 계수만 설정하는 데 사용됩니다. 반경 스케일을 사용하여 사용자 정의 구성 요소를 스타일링할 수 있습니다.

반경 토큰은 CSS 변수를 사용하여 접근할 수 있습니다. 이러한 토큰을 사용하여 사용자 정의 구성 요소를 스타일링하여 나머지 테마와 일관되게 유지할 수 있습니다.

/* 자동으로 반경 계수에 반응하는 반경 값 */

var(--radius-1);

var(--radius-2);

var(--radius-3);

var(--radius-4);

var(--radius-5);

var(--radius-6);



/* 테마 반경을 제어하는 곱셈기 */

var(--radius-factor);



/*

 * 완전히 둥근 반경을 계산하는 데 사용되는 변수입니다.

 * 일반적으로 CSS `max()` 함수 내에서 사용됩니다.

 */

var(--radius-full);



/*

 * 썸 요소의 반경을 계산하는 데 사용되는 변수입니다.

 * 일반적으로 CSS `max()` 함수 내에서 사용됩니다.

 */

var(--radius-thumb);
PreviousBreakpoints
NextShadows
Edit this page on GitHub.