Skeleton 骨架屏

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

按需加载方法

  1. import { skeleton } from '@nutui/nutui';
  2. skeleton.skeleton.install(Vue);
  3. skeleton.skeletonCircle.install(Vue);
  4. skeleton.skeletonColumn.install(Vue);
  5. skeleton.skeletonRow.install(Vue);
  6. skeleton.skeletonSquare.install(Vue);

长方形

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

圆形

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

横向排列

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

纵向排列

  1. <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-

Skeleton 骨架屏 - 图1