Skeleton 骨架屏请使用手机扫码体验

在页面上待加载区域填充灰色的占位图,本质上是界面加载过程中的过渡效果。

长方形

  1. html
    <skeleton-square
  2. width="200px"
  3. >
  4. </skeleton-square>

圆形

  1. html
    <skeleton-circle
  2. diameter="50px"
  3. >
  4. </skeleton-circle>

横向排列

  1. html
    <row
  2. padding="15px 10px 0"
  3. >
  4. <skeleton-square
  5. width="200px"
  6. ></skeleton-square>
  7. <skeleton-square
  8. width="50px"
  9. margin="0 0 0 40px"
  10. ></skeleton-square>
  11. <skeleton-square
  12. width="50px"
  13. margin="0 0 0 10px"
  14. ></skeleton-square>
  15. </row>

纵向排列

  1. html
    <column>
  2. <skeleton-square
  3. width="275px"
  4. :count="2"
  5. margin="5px 10px 5px 10px"
  6. ></skeleton-square>
  7. <skeleton-square
  8. width="100px"
  9. margin="5px 10px 5px 10px"
  10. ></skeleton-square>
  11. </column>

Prop

layout(row|column)

字段说明类型默认值
width宽度String-
padding填充间距String-

basic(square|circle)

字段说明类型默认值
width宽度String-
margin外部间距String-