Message消息

查看源码components/message.go

收到的消息#

生产 Message 负责头像和元数据，调用方填充正文槽。

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

regions := components.Message(canvas, theme, bounds, components.MessageData{
    Header: "Ari · Design", Footer: "09:42", Initials: "AR", ShowAvatar: true,
})
components.Bubble(canvas, theme, regions.Content,
    components.BubbleStart, components.BubbleSecondary, "Native preview ready.")

双向消息#

起始与结束方向并列展示，结束方向的页眉页脚靠右。

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

ari := components.Message(canvas, theme, first, components.MessageData{
    Header: "Ari · Design", Footer: "09:42", Initials: "AR", ShowAvatar: true,
})
components.Bubble(canvas, theme, ari.Content, components.BubbleStart,
    components.BubbleSecondary, "Native preview ready.")
you := components.Message(canvas, theme, second, components.MessageData{
    Header: "You", Footer: "Delivered", Initials: "YO",
    Alignment: components.MessageEnd, ShowAvatar: true,
})
components.Bubble(canvas, theme, you.Content, components.BubbleEnd,
    components.BubbleDefault, "Ship the compact variant.")

连续消息#

同一发送者的连续消息只在最后一条显示头像，其余预留头像位。

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

group := components.BeginMessageGroup(theme, bounds)
first := components.Message(canvas, theme, group.Row(44),
    components.MessageData{ReserveAvatar: true})
components.Bubble(canvas, theme, first.Content,
    components.BubbleStart, components.BubbleSecondary, "Native preview is ready.")
last := components.Message(canvas, theme, group.Row(64),
    components.MessageData{Initials: "AR", ShowAvatar: true, Footer: "09:42"})
components.Bubble(canvas, theme, last.Content,
    components.BubbleStart, components.BubbleSecondary, "Ship it when the gate is green.")

安装

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

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

源码组件用法#

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

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

验证边界#

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

键盘操作

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