外观
图标
ui.Icon 把 SVG 作为图标显示:使用文本颜色——和文本一样从祖先元素继承, 无论文件本身是什么颜色——高度与字号一致,并保持 SVG 的宽高比。Lucide、 Heroicons、Tabler、Material Symbols 等图标集可以直接使用:
go
//go:embed icons/save.svg
var saveSVG []byte
var save = ui.MustParseSVG(saveSVG)
ui.Row(c).Gap(6).Children(func() {
ui.Icon(c, save)
ui.Text(c, "Save")
})
ui.Icon(c, save).FontSize(24).TextColor(c.Theme().Danger)FontSize 和 TextColor 像对文本那样决定它的大小和颜色;Size 给它另外的 尺寸。图标不会在列中横向拉伸。
在按钮中
在按钮里(按钮把子元素按行布局并赋予它们文本颜色),图标放在标签前面:
go
ui.PrimaryButton(c, "").Children(func() {
ui.Icon(c, save)
ui.Text(c, "Save").SingleLine()
})Rotate 旋转图标,比如旋转指示器或展开用的箭头:
go
spin := ui.Icon(c, loader)
spin.Rotate(spin.Loop("spin", time.Second, ui.Linear) * 360)MyGo 如何绘制 SVG、支持其中哪些内容,见图像页面。在 Draw 回调中,Painter.Icon 绘制图标。
无障碍
图标是辅助技术看不到的装饰,除非用 Label 为它命名:对于只显示图标的按钮, 请改为给按钮命名。