光标

概述

¥Overview

Chakra UI 使用 cursor 令牌定义交互元素的光标。

¥Chakra UI uses the cursor token to define the cursor for interactive elements.

光标标记

¥Cursor Tokens

要自定义 Chakra 中交互元素的光标，请设置所需的 cursor 令牌值。

¥To customize the cursor for interactive elements in Chakra, set the desired cursor token values.

以下是可用的光标标记列表：

¥Here's a list of the available cursor tokens:

• 按钮：按钮光标

• 复选框：复选框和复选框卡片的游标

• 已禁用：禁用元素光标

• 菜单项：菜单项和菜单选项的游标。

• 选项：选择框、组合框和列表框选项的光标

• radio

• slider

• switch

自定义光标

¥Customizing Cursors

以下是如何更改按钮光标的示例，你可以将 button 令牌设置为 default。

¥Here's an example of how to change the cursor for a button, you can set the button token to default.

import { createSystem, defaultConfig } from "@chakra-ui/react"

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      cursor: {
        button: { value: "pointer" },
      },
    },
  },
})