关于 Skeleton 骨架屏组件开发相关

[Tyh2001]

说明

将加载中的数据用骨架屏占位显示，提升用户体验

设计稿

https://www.figma.com/file/Ge2Dslin4SpSGG3oVNqAOg/Skeleton-%E9%AA%A8%E6%9E%B6%E5%B1%8F?node-id=0%3A1

Attributes

参数	描述	类型
loading	是否展示	boolean
round	是否为圆角	boolean
width	自定义宽度	string / string[]
height	自定义高度	string / string[]
spacing	间距尺寸	number
animation	是否启用动画	boolean
rows	展示多少排	number
background	自定义骨架颜色	string
size	不同尺寸	large middle small

width 和 height 参数支持两种数据类型，传入一个数字那么那么 rows 中的每个都会作用这个尺寸

如果传入的是 string[] 类型，那么会进行遍历数组，按顺序作用 rows 的每一个尺寸

animation

动画目前可以先使用下面效果

该效果暂未定准，后续优化

.tyh-skeleton-animation {
  animation: skeleton 1.5s infinite;
}

@keyframes skeleton {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }

参考地址

https://50projects50days.com/projects/content-placeholder/