@ai-matrx/tap-目标
AI Matrx 启动目标按钮系统:每个按钮占用 一个固定的38px
脚印 持有 32px圆药和16px甘油,所以相邻按钮
完全坐在6px相隔,没有包装(宽的形状——胶囊,有标签的药丸)
高28px; 24px 避孕药在瘦小组几何; a
在粗指针上,通过隐形的击打斜口向44px移动的区域,加
TapTargetSearchGroup ——macOS工具栏搜索,并附有媒体反馈,移动自带卫生(无300ms延迟,无iOS灰色)
闪光),并正确 radix 的转发 asChild 触发。 。 。 .
- 初级 —— 说
TapTargetButton(眼镜),TapTargetButtonTransparent, (中文(简体) ),TapTargetButtonSolid, (中文(简体) ),TapTargetButtonDestructive, (中文(简体) ),TapTargetButtonForGroup+ 键TapTargetButtonGroup,则TapTargetLabeled字幕包装. - ~60 预组合按钮 —— 说
BugTapButton, (中文(简体) ),PlusTapButton, (中文(简体) ),TrashTapButton,... 一个导入, 一个标记, 零配置, 所有格言 内入. 透过./buttons子路径. - 每个按钮都可以是 按钮、标签或链接 (单位:千美元)
as="label", (中文(简体) ),href, (中文(简体) ), 自动携带 工具提示线条 从ariaLabel,并支持 内入行标题( i)label使药丸扩大.
npm install @ai-matrx/tap-target
端点 : react >= 18. 犬科原始、几何和工具提示行为
从普通的 @ai-matrx/design-system 依赖性.
设置——两个一次性步骤
1. 在您的应用根导入样式表一次 。 中央支助系统是
产品 ——"几何"和"新闻反馈"都活在其中,没有任何东西使得
没有它是正确的。 在您的根 CSS 中首先声明其锁层
(单位:千美元)@layer matrx-tap-lock; 因此,没有阶级可以弯曲它
发展过程中的滥用警戒enableTapTargetGuard():
// app/layout.tsx (or your root entry)
import "@ai-matrx/tap-target/styles.css";
这条线就够了,因为本表0.2.1 @import编号
@ai-matrx/design-system/styles.css,它需要 QUIRES —— 装载按钮的
旋转器穿设计系统 matrx-spin,其中定义了关键框架
(从来没有) animate-spin,此软件包不能运出。 如果你的应用
已导入设计- 系统工作表, 没有重复 .
2. 在根上挂载工具提示提供者 (如果您的应用程序已经挂载)
@radix-ui/react-tooltip提供者 :
import { TooltipProvider } from "@ai-matrx/tap-target";
<TooltipProvider delayDuration={300}>{children}</TooltipProvider>
链接部分注册
href 任何启动按钮上都会有一个链接。 外部资源http(s):, (中文(简体) ), mailto:, (中文(简体) ),
tel:总是使 <a target="_blank" rel="noopener noreferrer">内部
通过您路由器的链接组件生成 hrefs 渲染——一次注册
启动 :
import Link from "next/link";
import { setTapTargetLinkComponent } from "@ai-matrx/tap-target";
setTapTargetLinkComponent(Link); // e.g. in a client boot component
没有登记,内脏就会掉回平地 <a> (仍然是a)
工作链接——没有前置,没有客户端的路由. 单人覆盖
还提供: <TapTargetButton href="/tasks" linkComponent={Link} />。 。 。 .
使用量
import { TapTargetButton, TapTargetButtonGroup, TapTargetButtonForGroup } from "@ai-matrx/tap-target";
import { PlusTapButton, TrashTapButton } from "@ai-matrx/tap-target/buttons";
// Pre-composed (preferred): one tag, tooltip auto-derives from ariaLabel
<PlusTapButton onClick={add} ariaLabel="Add a task" />
// Variants: glass (default) | transparent | solid | group
<TrashTapButton variant="solid" bgColor="bg-destructive" iconColor="text-destructive-foreground" />
// Links
<PlusTapButton href="/tasks/new" ariaLabel="New task" />
// Inline caption (widens the pill, tooltip off — the label self-describes)
<PlusTapButton label="Add" />
// Grouped slim buttons in one shared glass shell
<TapTargetButtonGroup>
<TapTargetButtonForGroup ariaLabel="Undo" icon={<UndoIcon />} />
<TapTargetButtonForGroup ariaLabel="Redo" icon={<RedoIcon />} />
</TapTargetButtonGroup>
// Custom glyph via the primitive
<TapTargetButton ariaLabel="Custom" icon={<MyIcon className="h-4 w-4" />} />
参考基础 <button>,所以每个按钮都像拉迪克斯
asChild 触发器( Dropdown Menu, Popover, Tooltip,...):
<DropdownMenuTrigger asChild>
<MoreHorizontalTapButton />
</DropdownMenuTrigger>
子路径
| 子路径 | 这是什么 |
|---|---|
. | 初学者, TapTargetLabeled,链接注册,工具提示再出口. |
./buttons | ~60预编成的按钮(重-每个格子内衬;选入). |
./styles.css | REQUIRED 几何/ feedback 样式表——在应用根导入一次 . |
./package.json | 名单. |
样式笔记
- 几何和新闻反馈来自
styles.css(单位:千美元).matrx-tap-*) (中文(简体) ). 改为: 重调每个调试按钮, 该文件是真理的唯一来源—— 永远 每个按钮大小覆盖. - 备选案文 装饰 在避孕药上使用 Tailwind 风格的实用类
(单位:千美元)
bg-primary, (中文(简体) ),hover:bg-muted, (中文(简体) ),text-foreground和马特克斯matrx-glass-thin-border编号 :matrx-glass-interactive玻璃课). 在一个 Tailwind 应用这些针对您主题符号的解析度; 确保您 Tailwind 构建扫描此软件包( Tailwind v4 :@source "../node_modules/@ai-matrx/tap-target";和提供两者matrx-glass-*类(或接受无装饰玻璃药丸). - 永远不要多包一个水龙头按钮
p-*编号 :m-*编号 :gap-*- 已经装好了 保留间隔。 有了警卫,这样的按钮就成了红盒子. - 放出时间探测器 (2026-10-09):此行为一行变化而存在以测量推向npm.