Skeleton 骨架屏

在内容加载前展示页面的大致结构，降低用户的等待焦虑。支持文本段落、圆形头像、按钮/图片等多种骨架形态以及带头像的段落组合。

基础用法

默认显示 3 行文本段落骨架，自带渐变动画。

自定义行数与宽度

通过 rows 设置行数，width 设置各行宽度（支持数组逐一指定）。

圆形骨架

设置 shape='circle' 显示圆形骨架，通过 size 控制尺寸。

矩形骨架

设置 shape='rect' 显示矩形骨架，适用于按钮、图片等占位。

带头像的段落

设置 show-avatar 在段落左侧展示圆形头像骨架，avatar-size 控制头像大小。

圆角行

设置 round 使段落行变为胶囊形状。

关闭动画

设置 animated 为 false 关闭渐变闪烁动画。

加载切换

通过 loading 控制骨架与真实内容的切换，加载完成后展示 slot 内容。

卡片骨架

组合多种形态模拟卡片占位效果。

参数	类型	默认值	说明
`loading`	`boolean`	`true`	是否处于加载状态，为 false 时显示 slot 内容
`rows`	`number`	`3`	段落骨架行数
`animated`	`boolean`	`true`	是否开启动画
`width`	`string \| number \| Array<string \| number>`	`—`	行宽度，数组可逐行指定
`height`	`number \| string`	`16`	行高度(px)，shape=rect 时也用于指定高度
`shape`	`'text' \| 'circle' \| 'rect'`	`'text'`	骨架形态：文本段落、圆形、矩形
`size`	`'sm' \| 'md' \| 'lg' \| number`	`'md'`	圆形骨架尺寸（仅 shape=circle 时生效）
`showAvatar`	`boolean`	`false`	段落左侧是否显示圆形头像
`avatarSize`	`number`	`40`	头像大小(px)
`round`	`boolean`	`false`	行是否为胶囊圆角

插槽名	说明
`default`	加载完成后的真实内容（loading 为 false 时渲染）