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 | string	0
row-width	Row width, can be array	number | string | (number | string)[]	100%
title	Whether to show title placeholder	boolean	false
avatar	Whether to show avatar placeholder	boolean	false
loading	Whether to show skeleton，pass false to show child component	boolean	true
animate	Whether to enable animation	boolean	true
title-width	Title width	number | string	40%
avatar-size	Size of avatar placeholder	number | string	32px
avatar-shape	Shape of avatar placeholder，can be set to square	string	round