Skeleton
ui.widgets.Skeletonコンテンツの読み込み中に表示するプレースホルダーの骨組み。
BEHAVIOR CONTRACT
text / rect / circle のバリアント、角丸、shimmer はテーマに沿った見た目になります。
RECORDED INTERACTION
実際の shimmer アニメーションを示します。
// ── Skeleton ──
pub fn buildSkeleton(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
// 同 spinner:框到骨架图形本身,避开标题/描述文字的像素。
c.meta.ownership.meta.test_id = "story.skeleton.col";
try c.appendChild(a, try W.Skeleton(.{ .variant = .text, .width = 280, .height = 14 }).mount(scope, cx));
try c.appendChild(a, try W.Skeleton(.{ .variant = .text, .width = 200, .height = 14 }).mount(scope, cx));
try c.appendChild(a, try W.Skeleton(.{ .variant = .circular, .width = 48, .height = 48 }).mount(scope, cx));
try c.appendChild(a, try W.Skeleton(.{ .variant = .rectangular, .width = 280, .height = 80 }).mount(scope, cx));
return c;
}Storybook にあるこの story のコードそのままです(zenit 5f9add5+wip 2026-09-30)。W は ui.widgets のことで、col / row / label は Storybook 内の小さなレイアウトヘルパーです。
SkeletonProps
ui.widgets.Skeletonfn Skeleton(props: SkeletonProps) SkeletonBuilderフィールド
型
デフォルト値
説明
variantSkeletonVariant.text.circular.rectangular.text—
widthf32200—
heightf3216—
animatebooltrue—
countu81—
gapf328—
*Node
ui.widgets.Skeletonmount は *Node を直接返します。親ノードに append してください。