components/formcompose
Entradas · 11 / 64

Form Composition

Input · Select · Button

Input, Select y Button combinados en un mismo tamaño: una barra de filtros y un formulario de negocio.

BEHAVIOR CONTRACT

Los tres comparten ControlSize (altura de caja XS 20 / SM 24 / MD 32 / LG 40), así que altura, radio, tipografía, iconos y espaciado se alinean en cada tamaño.

RECORDED INTERACTION

El harness filtra por estado y responsable y escribe una búsqueda en la barra; luego rellena el cliente, la región y el importe en el formulario.

examples/storybook/form_composition.zig:185
pub fn build(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const root = try ui.box(cx, .{ .direction = .column, .gap = 16 }, .{});
    tag(root, "story.formcompose.root");

    try root.appendChild(a, try heading(cx, "Filter toolbar · same size"));
    try root.appendChild(a, try caption(cx, "Input / Select / Button share ControlSize: XS 20 · SM 24 · MD 32 · LG 40 px"));
    inline for (sizes) |spec| {
        try root.appendChild(a, try filterToolbar(spec, scope, cx));
    }

    try root.appendChild(a, try heading(cx, "Business form · MD"));
    try root.appendChild(a, try orderForm(scope, cx));
    return root;
}
Ver el código en GitHubexamples/storybook/form_composition.zig:185

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