Button按钮

查看源码components/button.go

点击计数#

点击或键盘激活按钮，更新调用方持有的计数。

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

button := tree.ID(page, "button")
if f.Button(button, "Click me").Self(flex.Start).Clicked() {
    state.clicks++
}

六种变体#

六种生产按钮外观共享同一个点击计数。

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

f.Grid(128).Gap(12).Children(func() {
    f.Button(tree.ID(page, "default"), "Default").Clicked()
    f.Button(tree.ID(page, "destructive"), "Destructive").Destructive().Clicked()
    f.Button(tree.ID(page, "outline"), "Outline").Outline().Clicked()
    f.Button(tree.ID(page, "secondary"), "Secondary").Secondary().Clicked()
    f.Button(tree.ID(page, "ghost"), "Ghost").Ghost().Clicked()
    f.Button(tree.ID(page, "link"), "Link").Link().Clicked()
})

禁用变体#

六种变体保留禁用语义，不响应点击。

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

f.Grid(128).Gap(12).Children(func() {
    f.Button(tree.ID(page, "default"), "Default").Disabled(true).Clicked()
    f.Button(tree.ID(page, "destructive"), "Destructive").Destructive().Disabled(true).Clicked()
    f.Button(tree.ID(page, "outline"), "Outline").Outline().Disabled(true).Clicked()
    f.Button(tree.ID(page, "secondary"), "Secondary").Secondary().Disabled(true).Clicked()
    f.Button(tree.ID(page, "ghost"), "Ghost").Ghost().Disabled(true).Clicked()
    f.Button(tree.ID(page, "link"), "Link").Link().Disabled(true).Clicked()
})

安装

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

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

用法#

示例用 flex.Frame.Button 声明按钮；Clicked 在同一条声明里返回点击或键盘激活。重绘时保持 ID 稳定，状态由应用持有。

Default、Secondary、Outline、Ghost、Destructive、Link 共用同一个交互模型。
按钮默认按标签测量宽度；需要固定尺寸时用 Width。
XSmall、Small、Large 与图标尺寸由显式选项指定；纯图标按钮也需要可访问名称。

键盘与状态#

Tab 移动焦点，Enter 或空格激活可用按钮。鼠标获得焦点时不显示键盘焦点环。

禁用控件不能激活，也不参与焦点遍历。
悬停、按下和焦点状态直接读取 Canvas，不重复保存在应用状态里。

键盘操作

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