BjSkeleton

Placeholder animé (shimmer) : variantes text, heading, circle et rect ; tailles sm, md (défaut) et lg. Le div racine a aria-hidden="true".

Utilisation

<script setup>
import { BjSkeleton } from '@flrxnt/dsbj/vue'
<\/script>

<template>
  <div style="display: flex; flex-direction: column; gap: var(--bj-spacing-3v); max-width: 20rem">
    <BjSkeleton variant="heading" />
    <BjSkeleton variant="text" />
    <BjSkeleton variant="text" size="sm" />
    <div style="display: flex; align-items: center; gap: var(--bj-spacing-3v)">
      <BjSkeleton variant="circle" size="lg" />
      <BjSkeleton variant="rect" style="flex: 1; min-height: 3rem" />
    </div>
  </div>
</template>

Aperçu

Variantes

<BjSkeleton variant="text" />
<BjSkeleton variant="heading" />
<BjSkeleton variant="circle" />
<BjSkeleton variant="rect" style="min-height: 4rem" />

Tailles

<BjSkeleton variant="text" size="sm" />
<BjSkeleton variant="text" size="md" />
<BjSkeleton variant="text" size="lg" />

Variantes × tailles

<!-- Exemples courants -->
<BjSkeleton variant="heading" size="sm" />
<BjSkeleton variant="heading" size="lg" />
<BjSkeleton variant="circle" size="sm" />
<BjSkeleton variant="rect" size="lg" style="width: 100%; min-height: 5rem" />

Mise en page

Composez plusieurs BjSkeleton pour imiter une carte ou un paragraphe.

<div class="bj-card" style="padding: var(--bj-spacing-4v); max-width: 22rem">
  <BjSkeleton variant="rect" style="min-height: 6rem; margin-bottom: var(--bj-spacing-3v)" />
  <BjSkeleton variant="heading" />
  <BjSkeleton variant="text" />
  <BjSkeleton variant="text" size="sm" />
</div>

Props

Prop	Description
`variant`	text (défaut), heading, circle ou rect.
`size`	sm, md (défaut) ou lg — dimension relative.
`(div attrs)`	Attributs div supplémentaires (style min-height sur rect, etc.).