Card | Tuff Docs

Use clickable only for whole-card navigation or selection; put separate actions on real buttons or links inside the slots.
Tune the look with variant, shadow, size, radius, and padding; override CSS variables only to align slot content or the mask color.
For low-level refraction or filter parameters (displace, distortionScale, redOffset, …), use TxBaseSurface.

API Reference

Props

Prop	Type	Default	Description
variant	`'solid' \| 'dashed' \| 'plain'`	`'solid'`	Border style; `plain` has no border and no hover feedback.
background	`'pure' \| 'blur' \| 'glass' \| 'refraction' \| 'mask'`	`'pure'`	Surface material.
shadow	`'none' \| 'soft' \| 'medium'`	`'none'`	Shadow strength.
size	`'small' \| 'medium' \| 'large'`	`'medium'`	Padding preset: `10` / `12` / `16` px.
radius	`number`	`18`	Corner radius in px.
padding	`number`	-	Padding in px; overrides `size`.
glassBlur	`boolean`	`true`	Enables blur under `glass` / `refraction`.
glassBlurAmount	`number`	`22`	Blur radius in px under `glass` / `refraction`.
glassOverlay	`boolean`	`true`	Enables the highlight layer under `glass` / `refraction`.
glassOverlayOpacity	`number`	`0.18`	Highlight layer opacity.
maskOpacity	`number`	`0.75`	Surface opacity under `mask`, clamped to `0..1`.
fallbackMaskOpacity	`number`	`0.26`	Mask opacity (0–1) when the surface falls back during motion.
surfaceMoving	`boolean`	`false`	External motion flag, merged with inertial motion and forwarded to the surface.
refractionStrength	`number`	`62`	Refraction strength (0–100); drives dispersion and distortion.
refractionProfile	`'soft' \| 'filmic' \| 'cinematic'`	`'filmic'`	Refraction style preset.
refractionTone	`'mist' \| 'balanced' \| 'vivid'`	`'vivid'`	Refraction tone preset; `vivid` avoids a gray cast.
refractionAngle	`number`	`-24`	Main dispersion direction in degrees.
refractionLightFollowMouse	`boolean`	`false`	Makes the highlight anchor follow the pointer.
refractionLightFollowIntensity	`number`	`0.45`	Follow weight (0–1) on dispersion angle and strength.
refractionLightSpring	`boolean`	`true`	Springs the light as it follows the pointer.
refractionLightSpringStiffness	`number`	`0.18`	Light spring stiffness, clamped to `0.01–0.55`.
refractionLightSpringDamping	`number`	`0.84`	Light spring damping, clamped to `0.55–0.99`.
clickable	`boolean`	`false`	Enables hover and press feedback (scales to `0.985`) and emits `click`.
loading	`boolean`	`false`	Covers the card with a `TxSpinner` overlay.
loadingSpinnerSize	`number`	-	Spinner size in px; `12` when omitted.
disabled	`boolean`	`false`	Disabled styling; blocks `click` and pointer motion.
inertial	`boolean`	`false`	Follows the pointer and springs back on leave.
inertialMaxOffset	`number`	`22`	Maximum follow offset in px.
inertialRebound	`number`	`0.12`	Rebound factor, clamped to `0..1`; higher is bouncier.

Events

Event	Params	Description
`click`	`(event: MouseEvent)`	Fires on click, Enter, or Space when the card is clickable and not disabled.

Slots

Slot	Props	Description
`default`	-	Body content.
`header`	-	Header above the body.
`footer`	-	Footer below the body.
`cover`	-	Cover before the header and body.

Overview

When clickable, the root gets role="button" and tabindex="0", and Enter / Space fire click; otherwise it is a plain div.
A disabled clickable card sets aria-disabled and leaves the tab order.
Only key presses on the card itself activate it; Enter / Space in slotted controls don't.
The loading overlay is aria-hidden; screen-reader and form-busy announcements are up to the caller.
background is forwarded to TxBaseSurface as the surface mode: mask uses maskOpacity, glass and refraction use the blur and overlay props; refraction props apply only under refraction.

Technologies

The surface is an aria-hidden TxBaseSurface; inertia is a requestAnimationFrame spring that writes --tx-card-dx / --tx-card-dy and stops once settled.
Source: packages/tuffex/packages/components/src/card/.

Customization

.custom-card {
  /* Base color sampled by mask and refraction fallback surfaces */
  --tx-card-fake-background: color-mix(in srgb, var(--tx-bg-color-overlay, #fff) 92%, transparent);
}

Variable	Written by	Purpose
`--tx-card-radius`	`radius`	Radius of the root, surface, cover, and loading overlay.
`--tx-card-padding`	`padding` or `size`	Padding and the cover's negative margin.
`--tx-card-dx` / `--tx-card-dy`	inertial motion	Root offset; don't set manually.
`--tx-card-fake-background`	caller / theme	Base color of mask and refraction fallback surfaces.
`--tx-surface-refraction-mask-color`	root inline style	Forwards `--tx-card-fake-background` to `TxBaseSurface`; override that one instead.

To follow an app theme, override global tokens such as --tx-bg-color-overlay, --tx-border-color-light, and --tx-color-primary.

查看源码

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