定价

Skeleton

Figma 源代码

在内容加载时展示占位轮廓，帮助用户预先理解页面结构，并保持加载过程中的布局连续。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于内容加载占位。已有组件支持 loading / skeleton 时先声明状态，让组件提供正确形状，不在页面重画它的骨架。

  • loading=false 渲染真实 children；加载时按 variant / width / height 或 renderHints 显示占位。

  • 优先让已有组件通过 loading 提供形状；独立骨架的尺寸和圆角仍使用设计系统 Token。

导入

import { Skeleton } from '@snowui-design-system/components';

用法

变体

加载状态

API 参考

属性 类型 默认值 示例 描述
variant SkeletonVariant — variant={value} 显式指定骨架形状；别名会归一化到 line / circle / rect
width string | number — width="Example" 显式宽度；数字会自动转成 rem
height string | number — height="Example" 显式高度；数字会自动转成 rem
componentClass string — componentClass="Example" 旧调用方兼容入口；仅在没有 renderHints 时匹配历史默认布局，新组件不得以此登记
renderHints FrameRenderHints — renderHints={value} 组件自注册协议，支持 variant / width / height / radius / rows
loading boolean true loading 是否显示骨架；为 false 时回退渲染 children
responsive ResponsiveConfig — responsive={value} 响应式宽高覆写
class string "" class="my-component" 外部类名；多项骨架时挂到布局容器，单项骨架时挂到骨架块本身
style string "" style="width: 100%;" 行内样式；多项骨架时挂到布局容器，单项骨架时挂到骨架块本身
children Snippet — <Skeleton>Content</Skeleton> 未显示骨架时渲染的真实子内容，无参数；骨架激活期间按组件骨架布局渲染。