components/spinner
Affichage · 24 / 64

Spinner

ui.widgets.Spinner

Une animation compacte pour les attentes courtes.

BEHAVIOR CONTRACT

La taille, la couleur et la planification des images sont pilotées par le gestionnaire d'animations.

RECORDED INTERACTION

Conserve des images réelles : la preuve qu'il ne s'agit pas d'un placeholder statique.

examples/storybook/stories.zig:638
// ── Spinner ──
pub fn buildSpinner(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const r = try row(cx, 20);
    // e2e 墨量断言要框到 spinner 本身:story.<key> 的 rect 还含标题/描述文字,
    // 那些文字的像素会把 spinner 画不出来这件事完全盖住(实测 7600+ dark)。
    r.meta.ownership.meta.test_id = "story.spinner.row";
    try r.appendChild(a, try W.Spinner(.{ .size = 16 }).mount(scope, cx));
    try r.appendChild(a, try W.Spinner(.{ .size = 24 }).mount(scope, cx));
    try r.appendChild(a, try W.Spinner(.{ .size = 36 }).mount(scope, cx));
    return r;
}
Voir le code sur GitHubexamples/storybook/stories.zig:638

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.

zenit · Double licenceGratuit pour les projets open source sous GPL-3.0-only ; les produits propriétaires ou commerciaux nécessitent une licence commerciale.Contacter l’auteur : zongyi.xzy#gmail.com (remplacez # par @)zenit 5f9add5+wip 2026-09-30