示例
直接操作示例，查看组件在具体任务中的状态与反馈。
列表占位
内容块占位
占位形状
成员表加载中
使用建议
形状接近最终布局
用 line、block 和 circle 组合出稳定结构，减少内容到达时的布局跳动。
只占位，不伪造内容
Skeleton 不应显示看似真实的姓名或数据，避免用户误把占位当成已加载结果。
尊重减少动态效果
默认动画会响应 reduced motion；静态占位可显式设置 animated 为 false。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseSkeleton } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Skeleton 本身对辅助技术隐藏，不会宣告加载状态；宿主需要在容器提供 aria-busy 或配合 LoadingState。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseSkeletonProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
variant?: 'line' | 'block' | 'circle';
animated?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseSkeletonClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
variant | 骨架占位使用的形状样式。 | 'line' | 'block' | 'circle' | 'line' |
animated | 是否播放加载或状态变化动画。 | boolean | true |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseSkeletonClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |