vant/src/skeleton
2020-01-10 21:06:05 +08:00
..
2020-01-10 21:06:05 +08:00
2020-01-10 21:06:05 +08:00

Skeleton

Install

import Vue from 'vue';
import { Skeleton } from 'vant';

Vue.use(Skeleton);

Usage

Basic Usage

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

Show Avatar

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

Show Children

<van-skeleton
  title
  avatar
  :row="3"
  :loading="loading"
>
  <div>Content</div>
</van-skeleton>
export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    this.loading = false;
  }
};

API

Props

Attribute Description Type Default
row Row count number 0
row-width Row width, can be array number | string | number[] | string[] 100%
title Whether to show title placeholder boolean false
title-width Title width string | number 40%
avatar Whether to show avatar placeholder boolean false
avatar-size Size of avatar placeholder string | number 32px
avatar-shape Shape of avatar placeholdercan be set to square string round
loading Whether to show skeletonpass false to show child component boolean true
animate Whether to enable animation boolean true