骨架屏 Skeleton - Ant Design

何时使用

网络较慢，需要长时间等待加载处理的情况下。
图文信息内容较多的列表/卡片中。
只在第一次加载数据的时候使用。
可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

代码演示

API

通用属性参考：通用属性

共同的 API

参数	说明	类型	默认值	版本
active	是否展示动画效果	boolean	false
classNames	用于自定义 Skeleton 组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-	6.0.0
styles	用于自定义 Skeleton 组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>	-	6.0.0

Skeleton

属性	说明	类型	默认值	版本
avatar	是否显示头像占位图	boolean \| SkeletonAvatar	false
loading	为 true 时，显示占位图。反之则直接展示子组件	boolean	-
paragraph	是否显示段落占位图	boolean \| SkeletonParagraphProps	true
round	为 true 时，段落和标题显示圆角	boolean	false
title	是否显示标题占位图	boolean \| SkeletonTitleProps	true

SkeletonTitleProps

属性	说明	类型	默认值
width	设置标题占位图的宽度	number \| string	-

SkeletonParagraphProps

属性	说明	类型	默认值
rows	设置段落占位图的行数	number	-
width	设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度	number \| string \| Array<number \| string>	-

Skeleton.Avatar

属性	说明	类型	默认值
shape	指定头像的形状	`circle` \| `square`	`circle`
size	设置头像占位图的大小	number \| `large` \| `small` \| `default`	`default`

Skeleton.Button

属性	说明	类型	默认值	版本
block	将按钮宽度调整为其父宽度的选项	boolean	false	4.17.0
shape	指定按钮的形状	`circle` \| `round` \| `square` \| `default`	-
size	设置按钮的大小	`large` \| `small` \| `default`	-

Skeleton.Input

属性	说明	类型	默认值
size	设置输入框的大小	`large` \| `small` \| `default`	-

Semantic DOM

Skeleton

root
6.0.0
根元素，包含表格显示、宽度、动画效果、圆角等骨架屏容器的基础样式
header
6.0.0
头部元素，包含表格单元格、内边距、垂直对齐等头像占位区域的布局样式
section
6.0.0
区块元素，包含骨架屏内容区域的布局样式
avatar
6.0.0
头像元素，包含行内块显示、垂直对齐、背景色、尺寸、圆角等头像占位的样式
title
6.0.0
标题元素，包含宽度、高度、背景色、圆角等标题占位的样式
paragraph
6.0.0
段落元素，包含内边距、列表项样式、背景色、圆角等段落占位的样式

Skeleton.Element

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
blockRadius	骨架屏圆角	number	4
gradientFromColor	渐变色起点颜色	string	rgba(0,0,0,0.06)
gradientToColor	渐变色终点颜色	string	rgba(0,0,0,0.15)
paragraphLiHeight	段落骨架屏单行高度	number	16
paragraphMarginTop	段落骨架屏上间距	number	28
titleHeight	标题骨架屏高度	string \| number	16

全局 Token如何定制？