Radix 首页
由 WorkOS 制作
Radix 首页
由 WorkOS 制作
主题主题基础组件基础组件图标图标颜色颜色
文档游乐场博客
指南

光标

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

默认光标

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

链接
链接
<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 主题的光标可以通过覆盖令牌系统的相应 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 主题样式之后，以便它具有优先级。

上一页阴影

下一个盒子
在 GitHub 上编辑此页面。