StripedPattern
striped-pattern斜条纹背景 · 纯 CSS 渐变 + currentColor
用法
基础用法
relative 容器内放一层 StripedPattern 即得斜条纹背景，默认 45°、10px 单元、text-border。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern />
</div>角度与疏密
angle 控制条纹倾角，size 控制条纹+间隔单元宽——竖向疏纹即 angle=90、size 加大。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern angle={90} size={20} />
</div>改色（吃主题）
条纹色取 currentColor，用 text-* 工具类换色，明暗主题自动适配。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern className="text-primary" />
</div>遮罩渐隐
叠加 mask-image 让条纹向边缘淡出，作区块背景更柔和。
tsx
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern className="[mask-image:radial-gradient(closest-side,black,transparent)]" />
</div>何时用
给区块铺斜条纹底纹（警示带/施工感/质感分隔）。要条纹用本组件；点状用 DotPattern，线网格用 GridPattern，径向辉光用 Spotlight。
导入
ts
import { StripedPattern } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| angle | number | 45 | 条纹角度（度） |
| size | number | 10 | 条纹+间隔单元宽 px |
继承ComponentPropsWithoutRef<"div">。颜色取currentColor，用text-*工具类控制。
禁忌 / 坑
- 内部
absolute inset-0铺满父级，必须放在relative（且通常overflow-hidden）定位容器内。 - 颜色靠
currentColor，用text-*改色。
相关
DotPattern · GridPattern · Spotlight · RetroGrid · Ripple · Meteors
Playground
<div className="relative">
<StripedPattern angle={45} size={10} />
</div>