Card 卡片 | Tuff Docs

属性	类型	默认值	说明
`variant`	`'solid' \| 'dashed' \| 'plain'`	`'solid'`	边框形态；`plain` 无边框、无悬停反馈。
`background`	`'pure' \| 'blur' \| 'glass' \| 'refraction' \| 'mask'`	`'pure'`	表面材质。
`shadow`	`'none' \| 'soft' \| 'medium'`	`'none'`	阴影强度。
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	内边距预设：`10` / `12` / `16` px。
`radius`	`number`	`18`	圆角（px）。
`padding`	`number`	-	内边距（px），优先于 `size`。
`glassBlur`	`boolean`	`true`	`glass` / `refraction` 下启用模糊。
`glassBlurAmount`	`number`	`22`	`glass` / `refraction` 下的模糊半径（px）。
`glassOverlay`	`boolean`	`true`	`glass` / `refraction` 下启用高光层。
`glassOverlayOpacity`	`number`	`0.18`	高光层透明度。
`maskOpacity`	`number`	`0.75`	`mask` 下的表面透明度，收敛到 `0..1`。
`fallbackMaskOpacity`	`number`	`0.26`	运动中降级为遮罩时的透明度（0–1）。
`surfaceMoving`	`boolean`	`false`	外部运动标记，与惯性运动合并后转发给表面。
`refractionStrength`	`number`	`62`	折射强度（0–100），驱动色散与扭曲。
`refractionProfile`	`'soft' \| 'filmic' \| 'cinematic'`	`'filmic'`	折射风格预设。
`refractionTone`	`'mist' \| 'balanced' \| 'vivid'`	`'vivid'`	折射色调预设；`vivid` 避免发灰。
`refractionAngle`	`number`	`-24`	色散主方向（度）。
`refractionLightFollowMouse`	`boolean`	`false`	高光锚点跟随指针。
`refractionLightFollowIntensity`	`number`	`0.45`	跟随权重（0–1），影响色散角度与强度。
`refractionLightSpring`	`boolean`	`true`	光源跟随使用弹簧过渡。
`refractionLightSpringStiffness`	`number`	`0.18`	光源弹簧刚度，收敛到 `0.01–0.55`。
`refractionLightSpringDamping`	`number`	`0.84`	光源弹簧阻尼，收敛到 `0.55–0.99`。
`clickable`	`boolean`	`false`	启用悬停与按压反馈（缩至 `0.985`），并派发 `click`。
`loading`	`boolean`	`false`	用 `TxSpinner` 遮罩覆盖卡片。
`loadingSpinnerSize`	`number`	-	Spinner 尺寸（px），省略时为 `12`。
`disabled`	`boolean`	`false`	禁用样式，阻止 `click` 与指针动效。
`inertial`	`boolean`	`false`	跟随指针位移，离开后弹簧回弹。
`inertialMaxOffset`	`number`	`22`	最大跟随位移（px）。
`inertialRebound`	`number`	`0.12`	回弹系数，收敛到 `0..1`；越大越有弹性。

事件

事件名	参数	说明
`click`	`(event: MouseEvent)`	可点击且未禁用时，点击或按 Enter / Space 触发。

插槽

插槽名	Props	说明
`default`	-	正文。
`header`	-	正文上方的头部。
`footer`	-	正文下方的底部。
`cover`	-	头部与正文之前的封面。

概述

可点击时根节点带 role="button" 与 tabindex="0"，Enter / Space 与点击一样触发 click；否则是无语义的 div。
可点击卡片禁用时设置 aria-disabled 并移出 Tab 序列。
只响应卡片自身的 Enter / Space，插槽内控件的按键不会触发卡片。
loading 的遮罩带 aria-hidden，读屏或表单忙碌提示由调用方负责。
background 作为表面模式转发给 TxBaseSurface：mask 使用 maskOpacity，glass 与 refraction 使用模糊与高光参数；折射参数只在 refraction 下生效。

技术实现

表面是 aria-hidden 的 TxBaseSurface；惯性由 requestAnimationFrame 弹簧写入 --tx-card-dx / --tx-card-dy，静止后停止。
源码：packages/tuffex/packages/components/src/card/。

查看源码

packages/tuffex/packages/components/src/card/index.ts

自定义

.custom-card {
  /* mask 与折射降级表面采样的底色 */
  --tx-card-fake-background: color-mix(in srgb, var(--tx-bg-color-overlay, #fff) 92%, transparent);
}

变量	写入方	用途
`--tx-card-radius`	`radius`	根节点、表面、封面与加载层的圆角。
`--tx-card-padding`	`padding` 或 `size`	内边距与封面的负外边距。
`--tx-card-dx` / `--tx-card-dy`	惯性动效	根节点位移；不要手动设置。
`--tx-card-fake-background`	调用方 / 主题	`mask` 与折射降级表面的底色。
`--tx-surface-refraction-mask-color`	根节点内联样式	把 `--tx-card-fake-background` 转给 `TxBaseSurface`；改前者即可。

跟随应用主题时覆盖全局 token，如 --tx-bg-color-overlay、--tx-border-color-light、--tx-color-primary。