components/formcompose
Eingaben · 11 / 64

Form Composition

Input · Select · Button

Input, Select und Button gemischt in einer Größe: eine Filterleiste und ein Geschäftsformular.

BEHAVIOR CONTRACT

Alle drei teilen sich ControlSize (Boxhöhe XS 20 / SM 24 / MD 32 / LG 40), sodass Höhe, Radius, Schrift, Icons und Abstände in jeder Größe übereinstimmen.

RECORDED INTERACTION

Der Harness filtert in der Leiste nach Status und Verantwortlichem und tippt eine Suche, dann füllt er Kunde, Region und Betrag im Formular aus.

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;
}
Quellcode auf GitHub ansehenexamples/storybook/form_composition.zig:185

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