Skeleton
Content loading placeholder wrapping daisyUI skeleton class. shape (rect / circle / text), width, height, radius, animated via props. width/height are Tailwind class names (w-32, h-4, etc.).
default shape=rect, width=w-full, height=h-4, lines=1, radius=default, animated=true
shapes — rect / circle / text
rect (w-full h-16)
circle (default w-12 h-12)
text (lines=3)
card placeholder — avatar (circle) + 本文 (text lines=3)
text lines — 1 / 2 / 3 / 5
lines=1
lines=2
lines=3
lines=5
radius — default / sm / md / lg / xl / full
radius=default
radius=sm
radius=md
radius=lg
radius=xl
radius=full
width × height grid — Tailwind サイズ class
w-32 h-4 — 細い line
w-1/2 h-8 — 半幅
w-full h-32 — 画像枠
w-24 h-24 — 正方形 (rect)
animated=false — pulse animation を suppress (静的 placeholder)
animated=true (default)
animated=false
使い方
{{-- デフォルト: 1行のテキスト幅 placeholder --}}
<x-skeleton />
{{-- circle (avatar) — width/height 未指定なら w-12 h-12 --}}
<x-skeleton shape="circle" />
<x-skeleton shape="circle" width="w-16" height="h-16" />
{{-- text — lines>1 で段落 placeholder (最後の行は w-2/3) --}}
<x-skeleton shape="text" :lines="3" />
{{-- サイズは Tailwind class で (生 px は禁止) --}}
<x-skeleton width="w-32" height="h-8" />
<x-skeleton width="w-full" height="h-48" radius="lg" />
{{-- 角丸 --}}
<x-skeleton radius="full" /> {{-- pill --}}
<x-skeleton radius="lg" /> {{-- カード型 --}}
{{-- 静的 placeholder (pulse 無し) --}}
<x-skeleton :animated="false" />
{{-- 実例: 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>