Skip to content

Skeleton 骨架屏

骨架屏组件,用于数据加载时的占位展示。

基础用法

带标题

第一行会显示为更宽的标题样式。

卡片模式

适用于文章卡片、评论卡片等场景。

列表模式

适用于文章列表、评论列表等场景。

自定义行高

动态切换

API

Props

属性类型默认值说明
type'default' | 'card' | 'list''default'骨架屏类型
rowsnumber4行数
avatarbooleanfalse是否显示头像
avatarShape'circle' | 'square''circle'头像形状
avatarSize'sm' | 'md' | 'lg''md'头像尺寸
titlebooleanfalse第一行是否为标题(更宽)
rowSize'sm' | 'md' | 'lg''md'行宽度(仅 default 模式)

尺寸对照

尺寸头像大小行高度
sm32px0.875rem
md40px1rem
lg48px1.25rem

注意事项

  • 骨架屏是纯展示组件,无任何交互行为
  • default 模式按行显示,cardlist 模式自动布局
  • 动画为左到右的流光效果
  • 深色模式自动适配背景色
  • card 模式下 rows 表示内容区域的行数

Released under the MIT License