组件 · 反馈

Skeleton 骨架屏

加载占位骨架,可配置形状与动画。

入口 @selrux/ui/skeleton · 源码 src/components/skeleton/index.ts · 1 个组件 · 发布状态 preview

使用建议

  • 避免:用 Spinner 代替大块内容占位
  • 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造

引入

tsx
import { Skeleton } from '@selrux/ui/skeleton';

演练场

调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

shape 为 text / rect / circle,组合成内容占位。

动画

animation 为 pulse / none。

API

属性覆盖:示例用到 3 / 3 个自有属性(100%)

由 scripts/demo-coverage.mjs 统计,不含 className / style / 原生透传属性与纯转发事件。

Skeleton

为装饰占位添加主题几何和可选 CSS 动效;ref 指向根 span。

属性说明类型默认值
shape-"text" | "circle" | "rect"-
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-
animation-"none" | "pulse"-
childrenSkeleton 是空装饰节点,不包裹真实内容。undefined-

另有 53 项原生属性与事件继承自 HTMLAttributes,原样透传。

导出类型:SkeletonAnimation、SkeletonProps、SkeletonShape、SkeletonSize