Spin
spin加载遮罩 · 覆盖内容区 + tip + delay 防闪 + fullscreen
用法
包裹内容
spinning 时给被包裹的内容盖一层半透明遮罩 + 居中指示器，内容降透明且不可交互。
月度报表
数据正在计算中，请稍候。这里是被遮罩覆盖的内容区。
加载中…
tsx
<Spin spinning tip="加载中…">
<YourContent />
</Spin>加载完成（直出内容）
spinning=false 时不渲染遮罩，children 正常显示。
月度报表
数据正在计算中，请稍候。这里是被遮罩覆盖的内容区。
tsx
<Spin spinning={false}>
<YourContent />
</Spin>纯指示器
不传 children 时 Spin 作为独立加载指示器（无遮罩），可带提示文案。
处理中
tsx
<Spin spinning tip="处理中" />三尺寸
size 透传内部 Spinner，控制指示器大小。
tsx
<>
<Spin spinning size="sm" />
<Spin spinning size="md" />
<Spin spinning size="lg" />
</>何时用
给一块内容区盖上加载遮罩（异步刷新表格/卡片时半透明蒙层 + 旋转器 + 文案）用它，遮罩期内容 pointer-events:none。它带遮罩/包裹/整页能力；只需一个裸旋转图标（按钮内、行内）用 Spinner；已知进度百分比用 Progress。
导入
ts
import { Spin } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| spinning | boolean | true | 是否处于加载态 |
| delay | number | 0 | 延迟显示 ms：spinning 持续超过 delay 才显遮罩（防快速完成时闪烁） |
| size | "sm"｜"md"｜"lg" | "md" | 尺寸，透传内部 Spinner |
| fullscreen | boolean | false | 整页遮罩（fixed 覆盖视口），忽略 children |
| className | string | — | 容器类名 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| tip | ReactNode | 加载文案，居中显示在 Spinner 下方 |
| children | ReactNode | 被包裹内容；不传则作纯指示器 |
禁忌 / 坑
fullscreen会忽略 children（fixed 覆盖整个视口），它和「包裹内容」是两种互斥用法，别同时指望它既盖整页又包内容。- 用
delay防快速完成时的闪烁（请求 < delay 完成就不显遮罩）；长耗时加载置 0 立即显。 - 不传 children 时退化为纯指示器（等价于一个带 tip 的 Spinner）。
- 暂无其它已知坑。
相关
Playground
月度报表
数据正在计算中，请稍候。这里是被遮罩覆盖的内容区。
加载中…
<Spin spinning={true} size="md" tip="加载中…" delay={0}>
{children}
</Spin>