Skeleton preset
Article
Long-form reading layout
VArticleSkeletonarticle pattern
<VArticleSkeleton />
Controls
The picker cannot show transparency. Type an rgba() value to keep it.
The picker cannot show transparency. Type an rgba() value to keep it.
Implementation
<script setup lang="ts">
import { VArticleSkeleton } from "veload";
import "veload/style.css";
</script>
<template>
<VArticleSkeleton />
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 3 | Number of repeated text lines, list items, fields or data rows. Clamped to 1–12. Table and dashboard headers are separate; dashboard always includes one fixed header. |
mediaHeight | number | string | — | Height of the media block in pixels or any CSS length. |
showMedia | boolean | true | Toggles the media block where the pattern supports one. |
color | string | — | Base colour of the placeholder blocks. Falls back to `--v-skeleton-base-color`. |
highlightColor | string | — | Colour of the shimmer highlight. Falls back to `--v-skeleton-highlight-color`. |
animated | boolean | true | Enables the shimmer animation. Reduced-motion preferences always disable it. |
label | string | — | Accessible name announced by the status region. Without a label the skeleton stays hidden from assistive technology. |
About this preset
- Optional media block followed by a headline and body rows.
- The last row is shortened so the block looks like real copy.
- Use `showMedia` to remove the leading image.