Combobox组合框

查看源码components/combobox.go

选择框架#

输入区域、弹层和选项均使用生产 Combobox。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

combo := components.BeginCombobox(canvas, theme, inputBounds, components.ComboboxOptions{
    InputID: inputID, ClearID: clearID, Label: "Framework", Value: values[selected],
    Query: query, Open: open, Content: content, Scope: scope, DismissID: dismissID,
    ShowTrigger: true, ShowClear: selected > 0, Layer: 6,
})
combo.AddLabel("Available targets")
combo.AddItem(components.ComboboxItem{ID: opt.At(0), Label: "Viva Native", Selected: selected == 1})
combo.AddItem(components.ComboboxItem{ID: opt.At(1), Label: "WebGPU", Selected: selected == 2})
combo.AddSeparator()
combo.AddItem(components.ComboboxItem{
    ID: opt.At(2), Label: "Headless tests", Selected: selected == 3,
})
combo.End()

空结果#

查询无匹配项时显示生产空状态。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

combo := components.BeginCombobox(canvas, theme, inputBounds, components.ComboboxOptions{
    InputID: inputID, Label: "Framework", Value: values[selected], Query: "mobile",
    Open: open, Content: content, Scope: scope, DismissID: dismissID, Layer: 6,
})
if open {
    combo.AddEmpty("No matching frameworks")
}
combo.End()

无效状态#

保留选项弹层并突出输入边框。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

combo := components.BeginCombobox(canvas, theme, inputBounds, components.ComboboxOptions{
    InputID: inputID, ClearID: clearID, Label: "Framework", Value: values[selected],
    Query: query, Open: open, Invalid: true, Content: content, Scope: scope,
    DismissID: dismissID, ShowTrigger: true, ShowClear: selected > 0, Layer: 6,
})
combo.AddLabel("Available targets")
combo.AddItem(components.ComboboxItem{ID: opt.At(0), Label: "Viva Native", Selected: selected == 1})
combo.AddItem(components.ComboboxItem{ID: opt.At(1), Label: "WebGPU", Selected: selected == 2})
combo.AddItem(components.ComboboxItem{
    ID: opt.At(2), Label: "Headless tests", Selected: selected == 3,
})
combo.End()

多选标签#

标签与查询输入按宽度换行，容器随内容增高。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

// chips is the caller-owned []components.ComboboxChip, one RemoveID each.
var rects [5]ui.Rect
components.PaintComboboxChips(canvas, theme, bounds, chips, components.ComboboxChipsOptions{
    InputID: inputID, Label: "Framework", Query: query, Placeholder: "Add a framework…",
    Scope: scope, Focused: canvas.Focused() == inputID,
}, rects[:0])
if index, ok := canvas.ClickedIn(remove); ok {
    chips = append(chips[:index], chips[index+1:]...)
}

安装

将组件源码复制到自己的项目，直接修改。

go run ./cmd/viva add --out ./components/local combobox

源码组件用法#

此预览直接调用生产 Go 组件。稳定 ID、值与打开状态仍由应用持有；组件只负责绘制并声明交互语义。

标题旁的源码链接列出了全部选项与视觉决策。
请使用原生命令验证系统文本、焦点、无障碍与平台集成。
浏览器预览验证共享布局和场景行为，不代表原生性能。

验证边界#

示例覆盖当前 API 的代表性状态，但不表示每个桌面后端都已完成真机验证。

键盘操作

Tab 在控件间移动；Ctrl/⌘ K 搜索组件。进入预览后，键盘事件由 Go 运行时处理。