Spinner
ui.widgets.SpinnerUne 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.
// ── 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;
}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.
SpinnerProps
ui.widgets.Spinnerfn Spinner(props: SpinnerProps) SpinnerBuilderChamp
Type
Défaut
Description
sizef3220外径(逻辑像素)
stroke_widthf323线宽
color?Colornull弧线颜色(null = 使用主题 accent 色)
*Node
ui.widgets.Spinnermount renvoie directement *Node : ajoutez-le à un parent.