Press UI

# Skeleton 骨架屏

用于在内容加载过程中展示一组占位图形。

# 引入

import PressSkeleton from 'press-ui/press-skeleton/press-skeleton';

export default {
  components: {
    PressSkeleton,
  }
}

# 代码演示

# 基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<press-skeleton title :row="3" />

# 显示头像

通过avatar属性显示头像占位图。

<press-skeleton title avatar :row="3" />

# 展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<press-skeleton title avatar :row="3" :loading="loading">
  <div>实际内容</div>
</press-skeleton>

export default {
  data() {
    return {
      loading: true,
    }
  },
  methods: {
    onChange(val) {
      this.loading = val;
    }
  }
};

# API

# Props

参数 说明 类型 默认值
row 段落占位图行数 number 0
row-width 段落占位图宽度，可传数组来设置每一行的宽度 string | string[] 100%
title 是否显示标题占位图 boolean false
title-width 标题占位图宽度 string | number 40%
avatar 是否显示头像占位图 boolean false
avatar-size 头像占位图大小 string | number 32px
avatar-shape 头像占位图形状，可选值为square string round
loading 是否显示占位图，传false时会展示子组件内容 boolean true
animate 是否开启动画 boolean true

# 在线调试

横屏

← Steps →