GridPattern
grid-pattern网格背景 · 纯 SVG 线 + 虚线可配 + currentColor
用法
基础用法
relative 容器内放一层 GridPattern 即得网格背景，默认 40px 实线、text-border 吃主题。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern />
</div>虚线网格
strokeDasharray 传 "4 2" 即把实线换成虚线，配合更小单元得细密蓝图感。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern width={24} height={24} strokeDasharray="3 2" />
</div>改色（吃主题）
线色取 currentColor，用 text-* 工具类换色，明暗主题自动适配。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern className="text-primary" />
</div>遮罩渐隐
叠加 mask-image 让网格向边缘淡出，作 hero/区块背景更柔和。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern className="[mask-image:radial-gradient(closest-side,black,transparent)]" />
</div>何时用
给区块铺线网格底纹（技术感/蓝图感）。要线网格用本组件；点状纹理用 DotPattern，斜条纹用 StripedPattern，带透视滚动的复古网格用 RetroGrid。
导入
ts
import { GridPattern } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| width | number | 40 | 单元宽 |
| height | number | 40 | 单元高 |
| x | number | 0 | pattern x 偏移 |
| y | number | 0 | pattern y 偏移 |
| strokeDasharray | string | number | 0 | 线虚线模式；0 实线，传如 "4 2" 即虚线 |
继承ComponentPropsWithoutRef<"svg">。颜色取currentColor，用text-*工具类控制。
禁忌 / 坑
- 内部
absolute inset-0铺满父级，必须放在relative（且通常overflow-hidden）定位容器内。 - 颜色靠
currentColor，用text-*改色。
相关
DotPattern · StripedPattern · Spotlight · RetroGrid · Ripple · Meteors
Playground
<div className="relative">
<GridPattern width={40} />
</div>