Van Skeleton Paragraph

Vant SkeletonParagraph Component

Paragraph placeholder component for use within custom skeleton layouts.

When to Invoke

Invoke this skill when:

• User needs to create custom skeleton layouts with text placeholders
• User wants to display paragraph loading states
• User asks about skeleton paragraph customization
• User needs standalone paragraph skeleton components

Features

• Width Customization: Configurable paragraph width
• Round Style: Option for rounded corners
• Animation Support: Inherits animation from parent skeleton
• Standalone Usage: Can be used independently in custom layouts

API Reference

Props

Types

import type { SkeletonParagraphProps } from 'vant';

CSS Variables

Usage Examples

Basic Usage

<template>
  <van-skeleton-paragraph />
</template>

Custom Width

<template>
  <van-skeleton-paragraph row-width="60%" />
</template>

Round Style

<template>
  <van-skeleton-paragraph round />
</template>

In Custom Layout

<template>
  <van-skeleton>
    <template #template>
      <div class="card-skeleton">
        <van-skeleton-title />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph row-width="60%" />
      </div>
    </template>
  </van-skeleton>
</template>

<style>
.card-skeleton {
  padding: 16px;
}
</style>

Multiple Paragraphs

<template>
  <div class="paragraphs">
    <van-skeleton-paragraph />
    <van-skeleton-paragraph row-width="90%" />
    <van-skeleton-paragraph row-width="80%" />
    <van-skeleton-paragraph row-width="60%" />
  </div>
</template>

<style>
.paragraphs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Article Content Skeleton

<template>
  <div class="article-skeleton">
    <van-skeleton-title title-width="70%" />
    <div class="content">
      <van-skeleton-paragraph />
      <van-skeleton-paragraph />
      <van-skeleton-paragraph row-width="80%" />
    </div>
  </div>
</template>

<style>
.article-skeleton {
  padding: 16px;
}

.content {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Description List Skeleton

<template>
  <div class="description-list">
    <div v-for="i in 4" :key="i" class="item">
      <van-skeleton-paragraph row-width="30%" />
      <van-skeleton-paragraph row-width="60%" />
    </div>
  </div>
</template>

<style>
.description-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

Card Content Skeleton

<template>
  <div class="card-content-skeleton">
    <van-skeleton-image image-size="100%" image-shape="square" />
    <div class="text-content">
      <van-skeleton-title title-width="50%" />
      <van-skeleton-paragraph row-width="100%" />
      <van-skeleton-paragraph row-width="80%" />
    </div>
  </div>
</template>

<style>
.card-content-skeleton {
  border-radius: 8px;
  overflow: hidden;
}

.text-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Best Practices

1. Vary paragraph widths: Use different widths for a more natural appearance
2. Use round for modern design: Use round prop for modern, rounded design
3. Combine with other skeleton components: Use with SkeletonTitle and SkeletonImage for complete layouts
4. Match actual content: Set widths to match actual paragraph lengths