Message

一条聊天消息：气泡配合头部、尾部与头像，并向一侧对齐。

示例可交互

Message — Avalonia UIKit

Live demo unavailable

<StackPanel Width="420" Spacing="16" HorizontalAlignment="Left">
  <uikit:Message Footer="Read">
    <uikit:Message.Avatar>
      <uikit:Avatar UserName="Alice" Width="32" Height="32" />
    </uikit:Message.Avatar>
    <uikit:Message.Header>
      <StackPanel Orientation="Horizontal" Spacing="4">
        <TextBlock Text="Alice" />
        <TextBlock Text="10:24 AM" />
      </StackPanel>
    </uikit:Message.Header>
    <uikit:Bubble Classes="secondary" Content="Hi there!" />
    <uikit:Bubble Classes="secondary" Content="Can you review this draft?" />
  </uikit:Message>
  <uikit:Message Classes="end" Footer="Delivered">
    <uikit:Bubble Content="Looks good to me." />
  </uikit:Message>
</StackPanel>

用法

uikit:Message 表示对话中的一轮。其中的条目是气泡（也可以是任意内容：纯字符串以 16px 文字显示），间隔 10px；Header 位于其上方，Footer 位于其下方，使用弱化的 12px 文字并内缩 12px，除非气泡是 ghost；Avatar 位于气泡底部一侧。Classes="end" 把整条消息镜像到行的末端。把多条消息放进 Spacing="8" 的 StackPanel 中，即构成消息组。

示例

不含气泡：条目是字符串，以纯文本显示在头部下方。

纯文本可交互

Live demo unavailable

<uikit:Message Width="420" HorizontalAlignment="Left">
  <uikit:Message.Header>
    <TextBlock Text="Assistant" />
  </uikit:Message.Header>
  <x:String>Sure, here is a summary of the draft.</x:String>
  <x:String>It introduces the new controls one by one.</x:String>
</uikit:Message>

Message

#用法

#示例

用法

示例