Skeleton
ui.widgets.SkeletonStructure provisoire pendant le chargement du contenu.
BEHAVIOR CONTRACT
Les variantes text / rect / circle, les rayons et le shimmer suivent le thème.
RECORDED INTERACTION
Montre la vraie animation 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;
}Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.
SkeletonProps
ui.widgets.Skeletonfn Skeleton(props: SkeletonProps) SkeletonBuilderChamp
Type
Défaut
Description
variantSkeletonVariant.text.circular.rectangular.text—
widthf32200—
heightf3216—
animatebooltrue—
countu81—
gapf328—
*Node
ui.widgets.Skeletonmount renvoie directement *Node : ajoutez-le à un parent.