components/formcompose
输入与表单 · 11 / 64

Form Composition

Input · Select · Button

同一尺寸档的 Input、Select、Button 混排:筛选工具栏与业务表单。

BEHAVIOR CONTRACT

三者共用 ControlSize(外框高 XS 20 / SM 24 / MD 32 / LG 40),同档下高度、圆角、字号、图标与间距对齐。

RECORDED INTERACTION

Harness 在工具栏里筛选状态与负责人、输入搜索词,再在表单里填写客户、选择区域和金额。

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;
}
在 GitHub 查看源码examples/storybook/form_composition.zig:185

这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。

zenit · 双授权开源项目可按 GPL-3.0-only 免费使用;闭源或商业产品需要商业授权。可联系作者:zongyi.xzy#gmail.com(# 换成 @)zenit 5f9add5+wip 2026-09-30