骨架屏 Skeleton

骨架屏是一种用于在内容加载过程中提供视觉反馈的 UI 组件，通过显示占位元素来提升用户体验。

何时使用

• 页面或组件内容需要异步加载时
• 希望在内容加载过程中提供更好的用户体验时
• 需要减少页面闪烁和布局跳动时

示例

基础用法

最简单的骨架屏使用方式。

与内容结合使用

骨架屏常与实际内容结合使用，在加载完成时切换显示。

无动画效果

通过 animated 属性可以关闭骨架屏的动画效果。

基础元素变体

Skeleton 提供了多种基础元素变体。

头像骨架

用于显示用户头像的加载状态。

标题和段落骨架

用于显示标题和段落文本的加载状态。

段落宽度控制

可以自定义段落每一行的宽度。

按钮骨架

用于显示按钮的加载状态。

图片骨架

用于显示图片的加载状态。

卡片骨架

用于显示卡片组件的加载状态。

列表骨架

用于显示列表项的加载状态。

表格骨架

用于显示表格的加载状态。

个人信息卡片骨架

用于显示个人信息卡片的加载状态。

API

Skeleton Props

参数	说明	类型	默认值
loading	是否显示骨架屏	boolean	true
animated	是否显示动画	boolean	true
children	子元素（loading 为 false 时显示）	ReactNode	-
className	自定义类名	string	-

Skeleton.Element Props

参数	说明	类型	默认值
variant	形状	'text' | 'circular' | 'rectangular' | 'rounded'	'text'
width	宽度	number | string	-
height	高度	number | string	-
animated	是否显示动画	boolean	true
className	自定义类名	string	-
style	自定义样式	CSSProperties	-

Skeleton.Avatar Props

参数	说明	类型	默认值
size	尺寸	number | 'sm' | 'md' | 'lg'	'md'
shape	形状	'circle' | 'square'	'circle'
animated	是否显示动画	boolean	true
className	自定义类名	string	-

Skeleton.Title Props

参数	说明	类型	默认值
width	宽度	number | string	'40%'
animated	是否显示动画	boolean	true
className	自定义类名	string	-

Skeleton.Paragraph Props

参数	说明	类型	默认值
rows	行数	number	3
width	每行宽度，可以是数组	number | string | (number | string)[]	-
animated	是否显示动画	boolean	true
className	自定义类名	string	-

Skeleton.Button Props

参数	说明	类型	默认值
size	尺寸	'sm' | 'md' | 'lg'	'md'
shape	形状	'default' | 'circle' | 'round'	'default'
block	是否块级	boolean	false
animated	是否显示动画	boolean	true
className	自定义类名	string	-

Skeleton.Image Props

参数	说明	类型	默认值
width	宽度	number | string	200
height	高度	number | string	200
animated	是否显示动画	boolean	true
className	自定义类名	string	-

注意事项

1. 骨架屏主要用于在内容加载过程中提供视觉反馈，提升用户体验
2. 通过 loading 属性控制是否显示骨架屏，当 loading 为 false 时会显示实际内容
3. 通过 animated 属性可以控制是否显示加载动画效果
4. Skeleton 提供了多种预设组件：
   • Skeleton.Element：基础元素骨架
   • Skeleton.Avatar：头像骨架
   • Skeleton.Title：标题骨架
   • Skeleton.Paragraph：段落骨架
   • Skeleton.Button：按钮骨架
   • Skeleton.Image：图片骨架
5. 可以通过 width 和 height 属性自定义骨架元素的尺寸
6. Skeleton.Paragraph 支持自定义每行的宽度，可以通过数组形式分别设置每行宽度
7. 在暗色模式下，骨架屏会自动适配主题颜色
8. 骨架屏组件不包含任何业务逻辑，仅用于UI展示