FieldGroup

将相关输入和操作组合为一组。

实时预览

正在加载预览…

参数配置

全部字段 6

FieldGroupOptions

Styles · 0

FieldGroupItems

列表项 · 2
FieldGroupItem
FieldGroupItem

Go 代码

Go
// Inside a view; c is *ui.Context, t is nui.Theme.
// Keep s (example state) outside the view. See the complete example.
nui.FieldGroup(c.Key("group"), t, nui.FieldGroupOptions{Size: nui.SizeDefault, Disabled: false, Vertical: false}, []nui.FieldGroupItem{{ID: "input", Build: func(c *ui.Context, t nui.Theme) ui.Element {
	return nui.Input(c.Key("input"), t, &s.Value, nui.InputOptions{Label: "Search", Placeholder: "Search projects"})
}}, {ID: "button", Build: func(c *ui.Context, t nui.Theme) ui.Element {
	return nui.Button(c.Key("search"), t, "Search", nui.ButtonOptions{Leading: lucide.Search()})
}}})

使用说明

搜索输入与按钮通过 FieldGroupItem 组合，共用尺寸和禁用状态。切换 vertical 比较排列方式；每个项目使用稳定 ID，Build 只构建本次视图。

API 参考

FieldGroup

源码 
func FieldGroup(c *ui.Context, t Theme, opts FieldGroupOptions, items []FieldGroupItem) ui.Element

FieldGroupOptions

源码 
type FieldGroupOptions struct {
	Size               Size
	Disabled, Vertical bool
	Decoration
}
字段类型说明
SizeSize

Go 零值: SizeDefault

组件尺寸；默认值继承主题或组件尺寸。

Disabledbool

Go 零值: false

禁用组件及其交互。

Verticalbool

Go 零值: false

启用纵向排列。

UIStyles

Go 零值: zero value

以部件名称为键覆盖外观和间距。

Stylefunc(Slot, ui.Element)

Go 零值: nil

同步配置当前构建的部件；不要保留 Element。