Button

触发操作，支持多种样式和状态。

实时预览

正在加载预览…

参数配置

文字 label颜色 color尺寸 size样式 variant禁用 disabled否加载中 loading否图标 icon

全部字段 19

ButtonOptions

Variant

Color

Size

Neutral

Disabled

Loading

Block

Square

AccessibleLabel

Leading

Trailing

LoadingIcon

LoadingTrailing

Active

ActiveColor

ActiveVariant

Animate

UI

Styles · 0

Style

Go 代码

// Inside a view; c is *ui.Context, t is nui.Theme.
// Keep s (example state) outside the view. See the complete example.
nui.Button(c.Key("button"), t, "Save changes", nui.ButtonOptions{AccessibleLabel: cmp.Or("Save changes", "Example action"), Color: nui.ColorDefault, Size: nui.SizeDefault, Variant: nui.VariantDefault, Disabled: false, Loading: false, Leading: nil}).AlignSelf(ui.Start).OnClick(func() { s.Clicks++ })
ui.Textf(c, "Clicked %d times", s.Clicks)

使用说明

点击按钮观察计数，再试试图标、Outline、LG、加载和禁用状态。操作计数保存在视图外，修改外观不会重复触发点击回调；重置会清除计数。

API 参考

Button

源码

func Button(c *ui.Context, t Theme, label string, opts ButtonOptions) ui.Element

ButtonOptions

源码

type ButtonOptions struct {
	Variant Variant
	Color   Color
	Size    Size
	// Neutral selects the neutral palette; Color: Neutral is preferred.
	Neutral, Disabled, Loading, Block, Square bool
	AccessibleLabel                           string
	Leading, Trailing                         *ui.SVG
	LoadingIcon                               *ui.SVG
	LoadingTrailing                           bool // Place loading at the trailing edge unless Leading is set.
	Active                                    bool
	ActiveColor                               Color
	ActiveVariant                             Variant
	Animate                                   Optional[bool]
	UI                                        Styles
	Style                                     func(root, label, leading, trailing ui.Element)
}

字段	类型	说明
`Variant`	`Variant` Go 零值: `VariantDefault`	组件外观样式，支持范围取决于组件。
`Color`	`Color` Go 零值: `ColorDefault`	语义颜色；默认值继承主题或组件配色。
`Size`	`Size` Go 零值: `SizeDefault`	组件尺寸；默认值继承主题或组件尺寸。
`Neutral`	`bool` Go 零值: `false`	旧版中性色开关；优先使用 Color: nui.Neutral。
`Disabled`	`bool` Go 零值: `false`	禁用组件及其交互。
`Loading`	`bool` Go 零值: `false`	显示加载状态；是否阻止操作由组件决定。
`Block`	`bool` Go 零值: `false`	让按钮占据可用宽度。
`Square`	`bool` Go 零值: `false`	使用适合方形内容的间距。
`AccessibleLabel`	`string` Go 零值: `""`	覆盖控件的可访问名称，适用于纯图标操作。
`Leading`	`*ui.SVG` Go 零值: `nil`	内容前方的 SVG 图标。
`Trailing`	`*ui.SVG` Go 零值: `nil`	内容后方的 SVG 图标。
`LoadingIcon`	`*ui.SVG` Go 零值: `nil`	覆盖默认加载图标。
`LoadingTrailing`	`bool` Go 零值: `false`	在末尾显示加载图标；显式前置图标优先。
`Active`	`bool` Go 零值: `false`	控制激活状态或动态效果是否运行。
`ActiveColor`	`Color` Go 零值: `ColorDefault`	激活状态的颜色覆盖。
`ActiveVariant`	`Variant` Go 零值: `VariantDefault`	激活状态的外观覆盖。
`Animate`	`Optional[bool]` Go 零值: `unset`	控制动画，并遵守系统的减少动态效果偏好。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(root, label, leading, trailing ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。