切换·Esc 返回

光标Cursor

视觉效果与操作状态
用鼠标指针形状提示可以怎样操作

光标可以提示当前位置能够点击、输入、拖拽还是暂不可用。它只是辅助信号,控件本身仍要有清楚的文字和视觉状态;触屏设备也不能依赖鼠标指针。

default 👆pointer Itext grab not-allowed wait

什么时候用

  • 自定义可点击区域出现 pointer,并同时提供悬停、聚焦反馈
    可点的卡片标题👆
  • 输入区域使用文本光标,提示这里可以输入
    输入点什么…悬停变工字 I:这里可以输入
  • 拖拽排序用 grab / grabbing:抓起前张开手,抓起后握紧
    ⋮⋮ 任务卡片
  • 禁用状态配 not-allowed:比单纯置灰更明确地点不动
    提交

什么时候不用

  • 自定义可点击区域没有对应光标,用户较难发现
    点我展开详情
  • 禁用只置灰不配 not-allowed:用户以为卡了,还在狂点
    删除项目只置灰,用户还在狂点
  • 乱用自定义光标图片:热点对不准、挡内容,可用性直线下降
    🌟自定义图片光标,热点对不准还挡内容
  • 普通文字也挂满小手:到处都是信号等于没有信号
    一段普通介绍文字还是普通文字👆
组成结构 · Anatomy
悬停在这个区域上👆正在输入
1悬停区域Hover Area指针进入这个范围,cursor 就生效
2指针形状Cursor Shape由 cursor 的值决定,例如小手、工字或张手形
3热点Hotspot指针上真正生效的那个点,点击以它为准
4文本光标Caret输入框里闪烁的竖线,颜色用 caret-color 改
常见变体 · Variants
小手Pointer
👆pointer
一切可点的元素都用它
工字Text
Itext
输入框、文本域等可输入处
张手形Grab
grab
可拖拽排序的卡片与看板
禁止NotAllowed
not-allowed
禁用的按钮上,直说点不动
典型使用场景
按钮与链接的悬停
账号设置
修改资料后记得保存,查看隐私协议
👆
输入框悬停
昵称
2–20 个字符,支持中文、英文和数字
I
拖拽排序的看板卡片
进行中 · 2
改版落地页首屏
待处理 · 3
修复登录按钮错位
补充空状态插画
写发布公告
禁用的操作按钮
项目所有权 仅管理员可操作