Avatar头像

查看源码components/avatar.go

状态头像#

头像在没有图片时使用首字母回退。

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

components.Avatar(canvas, theme, bounds, components.AvatarData{
    Name: "Skyler", Initials: "SK", Tint: theme.Primary,
    Status: components.AvatarStatusOnline,
})

尺寸、回退与图片#

展示小型、默认和大型尺寸，以及带图片的头像。

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

components.Avatar(canvas, theme, small, components.AvatarData{
    Name: "Lin", Initials: "L", Size: components.AvatarSizeSmall,
})
components.Avatar(canvas, theme, standard, components.AvatarData{
    Name: "Skyler", Initials: "SK", Tint: theme.Primary,
})
components.Avatar(canvas, theme, large, components.AvatarData{
    Name: "Guest", Size: components.AvatarSizeLarge,
})
components.Avatar(canvas, theme, photo, components.AvatarData{
    Name: "Photo", Image: photoBitmap, Size: components.AvatarSizeLarge,
})

头像组#

使用生产 AvatarGroup 形成固定重叠间距。

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

group := components.BeginAvatarGroup(canvas, theme, bounds, components.AvatarSizeLarge)
group.Add(components.AvatarData{
    Name: "Ada", Initials: "AD", Tint: theme.Primary,
    Status: components.AvatarStatusOnline,
})
group.Add(components.AvatarData{Name: "Bo", Initials: "BO", Tint: theme.Success})
group.Add(components.AvatarData{Name: "Chen", Initials: "CH", Tint: theme.Danger})
group.Add(components.AvatarData{Name: "Photo", Image: photoBitmap})
group.AddCount("+8")

安装

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

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

源码组件用法#

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

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

验证边界#

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

键盘操作

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