Radix 首页
由 WorkOS 制作
Radix 首页
由 WorkOS 制作
主题主题PrimitivesPrimitives图标图标颜色颜色
文档Playground博客
指南

光标

自定义用于交互元素的光标。

默认光标

默认情况下，不链接到其他页面的交互元素使用常规箭头光标。这也与浏览器默认设置一致。但是，禁用的元素使用显式的禁用光标。

链接
链接
<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>

光标令牌

可以使用 CSS 变量访问光标设置。您可以使用这些令牌来样式化您的自定义组件，确保它们是可访问的并且与您的主题的其余部分保持一致。

/* Available cursor tokens */

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);

自定义

对于交互元素，通常使用指针光标。Radix 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;

}

确保您的 CSS 在 Radix Themes 样式之后应用，以便它具有优先权。

上一篇阴影
下一篇Box
在 GitHub 上编辑此页。