元件
pinion-ui

Theme

Tune

Lang

Skeleton

內容載入中的佔位符。包裝 daisyUI 的 skeleton 類別，shape (rect / circle / text) / width / height / radius / animated 由屬性控制。width / height 用 Tailwind 類別名傳遞 (`w-32`、`h-4` 等)。

預設: 單行文字寬度的 placeholder

<x-skeleton />

<div class="animate-pulse bg-base-300 rounded w-full h-4" aria-hidden="true"></div>

shape — rect (default) / circle / text

<x-skeleton width="w-full" height="h-16" />
<x-skeleton shape="circle" />
<x-skeleton shape="text" :lines="3" />

<div class="animate-pulse bg-base-300 rounded w-full h-16" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-full w-12 h-12" aria-hidden="true"></div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>

實例: card placeholder

<div class="flex items-start gap-4">
    <x-skeleton shape="circle" width="w-14" height="h-14" />
    <div class="flex-1 space-y-2">
        <x-skeleton width="w-1/3" height="h-4" />
        <x-skeleton shape="text" :lines="3" />
    </div>
</div>

<div class="flex items-start gap-4">
<div class="animate-pulse bg-base-300 rounded-full w-14 h-14" aria-hidden="true"></div>
<div class="flex-1 space-y-2">
<div class="animate-pulse bg-base-300 rounded w-1/3 h-4" aria-hidden="true"></div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>
</div>
</div>

text lines — 1 / 2 / 3 / 5

<x-skeleton shape="text" :lines="1" />
<x-skeleton shape="text" :lines="2" />
<x-skeleton shape="text" :lines="3" />
<x-skeleton shape="text" :lines="5" />

<div class="animate-pulse bg-base-300 rounded w-full h-4" aria-hidden="true"></div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>

圓角 — default / sm / md / lg / xl / full

<x-skeleton width="w-full" height="h-10" radius="default" />
<x-skeleton width="w-full" height="h-10" radius="sm" />
<x-skeleton width="w-full" height="h-10" radius="md" />
<x-skeleton width="w-full" height="h-10" radius="lg" />
<x-skeleton width="w-full" height="h-10" radius="xl" />
<x-skeleton width="w-full" height="h-10" radius="full" />

<div class="animate-pulse bg-base-300 rounded w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-sm w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-md w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-lg w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-xl w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-full w-full h-10" aria-hidden="true"></div>

尺寸用 Tailwind class 指定 (禁止使用原生 px)

<x-skeleton width="w-32" height="h-4" />
<x-skeleton width="w-1/2" height="h-8" />
<x-skeleton width="w-full" height="h-32" radius="lg" />
<x-skeleton width="w-24" height="h-24" radius="md" />

<div class="animate-pulse bg-base-300 rounded w-32 h-4" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded w-1/2 h-8" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-lg w-full h-32" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-md w-24 h-24" aria-hidden="true"></div>

靜態 placeholder (無 pulse) — animated=true (default) vs false

<div class="space-y-2">
    <x-skeleton width="w-2/3" height="h-4" />
    <x-skeleton width="w-full" height="h-4" />
    <x-skeleton width="w-1/2" height="h-4" />
</div>
<div class="space-y-2">
    <x-skeleton width="w-2/3" height="h-4" :animated="false" />
    <x-skeleton width="w-full" height="h-4" :animated="false" />
    <x-skeleton width="w-1/2" height="h-4" :animated="false" />
</div>

<div class="space-y-2">
<div class="animate-pulse bg-base-300 rounded w-2/3 h-4" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded w-full h-4" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded w-1/2 h-4" aria-hidden="true"></div>
</div>
<div class="space-y-2">
<div class="bg-base-300 rounded w-2/3 h-4" aria-hidden="true"></div>
<div class="bg-base-300 rounded w-full h-4" aria-hidden="true"></div>
<div class="bg-base-300 rounded w-1/2 h-4" aria-hidden="true"></div>
</div>