Skeleton
ui.widgets.SkeletonPlatzhalterstruktur, während Inhalte laden.
BEHAVIOR CONTRACT
Die Varianten text / rect / circle, Radien und Shimmer folgen dem Theme.
RECORDED INTERACTION
Zeigt die echte Shimmer-Animation.
// ── 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;
}Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). W steht für ui.widgets; col / row / label sind kleine Layout-Helfer des Storybooks.
SkeletonProps
ui.widgets.Skeletonfn Skeleton(props: SkeletonProps) SkeletonBuilderFeld
Typ
Standard
Beschreibung
variantSkeletonVariant.text.circular.rectangular.text—
widthf32200—
heightf3216—
animatebooltrue—
countu81—
gapf328—
*Node
ui.widgets.Skeletonmount gibt *Node direkt zurück – hängen Sie es an einen Elternknoten an.