Skeleton

A placeholder while content loads.

1 fichier

<div class="flex items-center gap-4">
  <pb-ui.skeleton class="size-12 rounded-full" />
  <div class="space-y-2">
    <pb-ui.skeleton class="h-4 w-56" />
    <pb-ui.skeleton class="h-4 w-44" />
  </div>
</div>

Installation

pyblade-ui add skeleton

Copiez ce fichier dans votre projet

components/ui/skeleton.html

<div data-slot="skeleton" {{ attributes.cn("animate-pulse rounded-md bg-accent") }}></div>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.skeleton> est disponible dans tous vos templates.

<pb-ui.skeleton class="h-4 w-48" />

Exemples

Carte

‹ Separator Progress ›