Themes
Advanced
Utils
Theme

Cursors

인터랙티브 요소에 사용되는 커서를 사용자 정의합니다.

Default cursors

기본적으로, 다른 페이지로 연결되지 않는 인터랙티브 요소는 일반 화살표 커서를 사용합니다. 이는 브라우저 기본값과 일치합니다. 그러나 비활성 요소는 명시적인 비활성 커서를 사용합니다.

Link
Link
<Flex align="center" gap="4" wrap="wrap">

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

		<Button>Button</Button>

		<Button asChild>

			<a href="#">Link</a>

		</Button>

		<Button disabled>Disabled</Button>

	</Flex>

	<Button variant="ghost">Ghost button</Button>

	<Link href="#" size="2">

		Link

	</Link>

	<Checkbox defaultChecked />

	<Switch defaultChecked />

	<Switch defaultChecked disabled />

</Flex>

Cursor tokens

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

/* 사용 가능한 커서 토큰 */

var(--cursor-button);

var(--cursor-checkbox);

var(--cursor-disabled);

var(--cursor-link);

var(--cursor-menu-item);

var(--cursor-radio);

var(--cursor-slider-thumb);

var(--cursor-slider-thumb-active);

var(--cursor-switch);

Customization

대부분의 인터랙티브 요소에 대해 포인터 커서를 사용하는 것이 일반적입니다. Confy-ui Themes 커서는 토큰 시스템의 해당 CSS 변수를 오버라이드하여 사용자 정의할 수 있습니다.

다음은 테마에서 대부분의 인터랙티브 요소에 대해 cursor: pointer를 설정하기 위해 커서 토큰을 사용자 정의하는 방법의 예입니다:

.radix-themes {

	--cursor-button: pointer;

	--cursor-checkbox: pointer;

	--cursor-disabled: default;

	--cursor-link: pointer;

	--cursor-menu-item: pointer;

	--cursor-radio: pointer;

	--cursor-slider-thumb: grab;

	--cursor-slider-thumb-active: grabbing;

	--cursor-switch: pointer;

}

Radix Themes 스타일보다 나중에 CSS가 적용되도록 하여 우선권을 가질 수 있도록 하세요.

PreviousShadows
NextBox
Edit this page on GitHub.