components/stepper
Acciones · 07 / 64

NumberStepper

ui.widgets.NumberStepper

Incremento y decremento precisos para cantidades y parámetros.

BEHAVIOR CONTRACT

min / max / step, la entrada directa, disabled y los botones de paso comparten una misma restricción numérica.

RECORDED INTERACTION

El harness pulsa el botón más; el valor avanza un paso.

examples/storybook/stories.zig:3025
// ── NumberStepper ──
pub fn buildNumberStepper(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);
    const ns = try ui.widgets.NumberStepper(.{ .value = 5, .min = 0, .max = 10 }, scope, cx);
    ns.wrapper.meta.ownership.meta.test_id = "story.stepper.basic";
    try c.appendChild(a, try label(cx, "0–10, step 1"));
    try c.appendChild(a, ns.wrapper);
    const ns2 = try ui.widgets.NumberStepper(.{ .value = 0.5, .step = 0.25, .width = 160 }, scope, cx);
    try c.appendChild(a, try label(cx, "step 0.25"));
    try c.appendChild(a, ns2.wrapper);
    const ns3 = try ui.widgets.NumberStepper(.{ .value = 3, .disabled = true }, scope, cx);
    try c.appendChild(a, try label(cx, "Disabled"));
    try c.appendChild(a, ns3.wrapper);
    return c;
}
Ver el código en GitHubexamples/storybook/stories.zig:3025

El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.

zenit · Doble licenciaGratis para proyectos de código abierto bajo GPL-3.0-only; los productos cerrados o comerciales necesitan una licencia comercial.Contacta con el autor: zongyi.xzy#gmail.com (cambia # por @)zenit 5f9add5+wip 2026-09-30