视觉与动效

AdaptivePointer

参照 iPadOS 妙控板圆形指针的自适应指针：淡灰填充层悬停时变形为目标下方的圆角板并带阻尼偏移，图标随之轻微移动，正文上变为 I 形竖条，静止 2 秒后淡出；可选的深灰外环缩成小圆 1:1 标出真实指针位置。支持整页与局部作用域（含浮层）与主题令牌，触屏与减少动态效果时使用系统指针。

iPadOS指针光标cursor悬停视差弹簧变形

快速预览

查看 AdaptivePointer 组件的基本效果

把指针移到按钮或链接上

基本用法

使用 AdaptivePointer 组件的基础示例

导入组件

1import {
2  AdaptivePointer,
3  AdaptivePointerArea,
4  pointerTarget,
5} from "@/components/qiuye-ui/adaptive-pointer";
6import { Button } from "@/components/ui/button";
7import { BoldIcon } from "lucide-react";

使用组件

1// 整页：放在根布局里一次。默认单层指针、内容视差、正文 I 形竖条、静止 2 秒后隐藏
2<AdaptivePointer />
3
4// 局部：只在子树内生效（含它打开的菜单、对话框）；ring 开启外环定位
5<AdaptivePointerArea ring className="rounded-xl border p-6">
6  <Button variant="ghost" size="icon" aria-label="加粗">
7    <BoldIcon />
8  </Button>
9  {/* 高度超过 96px 的卡片自动按 hover 处理：跟手的柔和圆，不变形 */}
10  <a href="/posts/1" className="block h-32 rounded-xl border p-4">
11    大卡片
12  </a>
13  {/* 显式指定效果（在客户端组件里调用） */}
14  <Button {...pointerTarget({ effect: "lift" })}>发布</Button>
15</AdaptivePointerArea>

AdaptivePointer

快速预览

基本用法

导入组件

使用组件

组件演示

工具栏

分段与标签

正文与链接

按钮与控件

大卡片

表单与原生区

浮层

滚动列表