骨架屏 · Skeleton
骨架屏用于反馈与状态场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。
安装与前置条件
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。
示例与使用方式
- 骨架屏 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
- 骨架屏 · 交互示例 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
- 骨架屏 · 交互示例 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
- 骨架屏 · 交互示例 4：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
API 与上游详细参考
优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。
Skeleton
An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. For content with unknown dimensions, use Spinner instead.
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | number | string | '100%' | 像素宽度（数字）或 CSS 值（字符串）。 |
| height | number | string | '100%' | 像素高度（数字）或 CSS 值（字符串）。 |
| radius | 'none' | 0 | 1 | 2 | 3 | 4 | 'rounded' | 3 | 使用设计令牌的边框圆角。使用 none 表示直角，rounded 表示完全圆角（头像、药丸形、圆形）。 |
| index | number | 0 | 交错动画时序的索引。对于索引为 n 的元素，动画在 DELAY_TIME + (STAGGER_TIME × n) 时开始。 |
使用建议
- Match the size and shape of the content being loaded to create a realistic placeholder.
- Stagger multiple skeletons with the
indexprop for a natural wave animation. - 避免：Use when the content dimensions are unknown; use Spinner instead.
- 避免：Combine with a Spinner on the same content area; pick one loading pattern.
- 避免：Show skeletons indefinitely; if loading takes too long, show an error or empty state instead.
主题 API
{
"targets": [
{
"className": "astryx-skeleton"
}
]
}
组件结构
- Placeholder: Painted shape that stands in for content while it loads.