DotPattern
dot-pattern点阵背景 · 纯 SVG pattern + currentColor token + RSC
用法
基础用法
在 relative 容器内放一层 DotPattern 即得点阵背景，默认 16px 单元、text-border 吃主题。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern />
</div>调整密度与点径
width/height 控制单元间距，cr 控制点半径——加大间距、加粗点即得疏朗大点阵。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern width={28} height={28} cr={1.6} />
</div>改色（吃主题）
点色取 currentColor，用 text-* 工具类即可换色，明暗主题自动适配。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern className="text-primary" />
</div>遮罩渐隐
叠加 mask-image 让点阵向边缘淡出，常用于 hero/卡片背景，避免硬边。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern className="[mask-image:radial-gradient(closest-side,black,transparent)]" />
</div>何时用
给卡片/区块/Hero 加点阵纹理底。要点状纹理用本组件；要线网格用 GridPattern，斜条纹用 StripedPattern，径向辉光用 Spotlight。
导入
ts
import { DotPattern } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| width | number | 16 | 平铺单元宽 |
| height | number | 16 | 平铺单元高 |
| cx | number | 1 | 点在单元内的 x 偏移 |
| cy | number | 1 | 点在单元内的 y 偏移 |
| cr | number | 1 | 点半径 |
| x | number | 0 | pattern 整体 x 偏移 |
| y | number | 0 | pattern 整体 y 偏移 |
继承ComponentPropsWithoutRef<"svg">（className等）。颜色取currentColor，用text-*工具类控制（如text-muted）。
禁忌 / 坑
- 内部
absolute inset-0铺满父级，必须放在relative（且通常overflow-hidden）定位容器内，否则无法定位/会溢出。 - 颜色靠
currentColor，用text-*改色而非fill。
相关
GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple · Meteors
Playground
<div className="relative">
<DotPattern width={16} cr={1} />
</div>