components/skeleton
Anzeige · 25 / 64

Skeleton

ui.widgets.Skeleton

Platzhalterstruktur, während Inhalte laden.

BEHAVIOR CONTRACT

Die Varianten text / rect / circle, Radien und Shimmer folgen dem Theme.

RECORDED INTERACTION

Zeigt die echte Shimmer-Animation.

examples/storybook/stories.zig:651
// ── 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;
}
Quellcode auf GitHub ansehenexamples/storybook/stories.zig:651

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.

zenit · DoppellizenzKostenlos für Open-Source-Projekte unter GPL-3.0-only; Closed-Source- oder kommerzielle Produkte benötigen eine kommerzielle Lizenz.Kontakt zum Autor: zongyi.xzy#gmail.com (# durch @ ersetzen)zenit 5f9add5+wip 2026-09-30