vant/src/skeleton

Skeleton

Install

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

const app = createApp();
app.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>

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const loading = ref(true);

    onMounted(() => {
      loading.value = false;
    });

    return {
      loading,
    };
  },
};

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
round v2.8.5	Whether to show round title and row	boolean	false
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

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@skeleton-row-height	16px	-
@skeleton-row-background-color	@active-color	-
@skeleton-row-margin-top	@padding-sm	-
@skeleton-title-width	40%	-
@skeleton-avatar-size	32px	-
@skeleton-avatar-background-color	@active-color	-
@skeleton-animation-duration	1.2s	-