概述 ​

  • Avatar：占位头像，默认为圆形，默认尺寸：Avatar medium: width: 48px，height: 48px。支持 Avatar 的 size（v1.0后支持)、shape 属性 (v2.20后支持)
  • Image：占位图像，默认尺寸：width: 100%，height: 100%。
  • Title：占位标题，默认尺寸：width: 100%， height: 24px。
  • Paragraph：占位内容部分，默认尺寸：width: 100%，height: 16px，margin-bottom: 10px。
  • Button：占位按钮，默认尺寸：width: 115px，height: 32px。

注意：默认样式均可通过 className 或 style 进行自定义。

代码演示 ​

如何引入 ​

jsx
import { Skeleton } from '@kousum/semi-ui-vue';

基本使用 ​

组合使用 ​

图片和标题。

统计数字。

头像和标题。

居中段落和按钮。

头像、标题和段落。

表格。

加载动画 ​

通过设置 active 属性可以展示动画效果。

API 参考 ​

Skeleton ​

属性说明类型默认值
active是否展示动画效果booleanfalse
className类名string-
loading为 true 时，显示占位元素。反之则显示子组件booleantrue
placeholder加载等待时的占位元素ReactNode-
style样式CSSProperties-

Skeleton.Avatar ​

Skeleton.Image，Skeleton.Title，Skeleton.Button 大部分API 与 Skeleton.Avatar 相同。其中 shape 仅 Skeleton.Avatar支持

属性说明类型默认值
className类名string-
size设置头像的大小，支持 extra-extra-small, extra-small、small、medium、large、extra-large v>=1.0stringmedium
style样式CSSProperties-
shape指定头像的形状，支持 circle、squarestringcircle

Skeleton.Paragraph ​

属性说明类型默认值
className类名string-
rows设置段落占位图的行数number4
style样式CSSProperties-

文案规范 ​

  • 不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示

设计变量 ​