Skeleton - Vant 4

Skeleton

Intro

Used to display a set of placeholder graphics during the content loading process.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Skeleton, SkeletonTitle, SkeletonImage, SkeletonAvatar, SkeletonParagraph, } from'vant'; const app = createApp(); app.use(Skeleton); app.use(SkeletonTitle); app.use(SkeletonImage); app.use(SkeletonAvatar); app.use(SkeletonParagraph);

Usage

Basic Usage

Show Avatar

Show Children

import { ref, onMounted } from'vue'; exportdefault { setup() { const loading = ref(true); onMounted(() => { loading.value = false; }); return { loading, }; }, };

Custom Content

Using template slots to custom skeleton content.

API

Skeleton Props

Attribute	Description	Type	Default
row	Row count	*number	string*
row-width	Row width, can be array	*number	string
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	Whether to show round title and paragraph	boolean	false
title-width	Title width	*number	string*
avatar-size	Size of avatar placeholder	*number	string*
avatar-shape	Shape of avatar placeholder, can be set to square	string	round

SkeletonParagraph Props

Attribute	Description	Type	Default
round	Whether to show round paragraph	boolean	false
row-width	Paragraph width	string	100%

SkeletonTitle Props

Attribute	Description	Type	Default
round	Whether to show round title	boolean	false
title-width	Title width	*number	string*

SkeletonAvatar Props

Attribute	Description	Type	Default
avatar-size	Size of avatar placeholder	*number	string*
avatar-shape	Shape of avatar placeholder, can be set to square	string	round

SkeletonImage Props

Attribute	Description	Type	Default
image-size	Size of image placeholder	*number	string*
image-shape	Shape of image placeholder, can be set to square	string	round

Skeleton Slots

Name	Description
default	Default slot
template	Custom content

Types

The component exports the following type definitions:

importtype { SkeletonProps, SkeletonImageProps, SkeletonTitleProps, SkeletonAvatarShape, SkeletonImageShape, SkeletonParagraphProps, } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-skeleton-row-height	16px	-
--van-skeleton-row-background	var(--van-active-color)	-
--van-skeleton-row-margin-top	var(--van-padding-sm)	-
--van-skeleton-title-width	40%	-
--van-skeleton-avatar-size	32px	-
--van-skeleton-avatar-background	var(--van-active-color)	-
--van-skeleton-duration	1.2s	-
--van-skeleton-image-size	96px
--van-skeleton-image-radius	24px	-