Bubble
聊天气泡：七种外观的文本气泡，可对齐到一侧，并带回应。
示例可交互
Live demo unavailable
<StackPanel Width="360" Spacing="8" HorizontalAlignment="Left">
<uikit:Bubble Classes="secondary start" Content="Can you review this draft?" />
<uikit:Bubble Classes="end" Content="Sure, I will take a look this afternoon." />
<uikit:Bubble Classes="secondary start" Content="This message is long enough to wrap onto a second line inside the bubble." />
</StackPanel>用法
uikit:Bubble 以 14px 文本、12×8 内边距与 15 的圆角半径容纳一条消息，最宽占可用空间的 80%，默认拉伸，除非用 start 或 end 样式类对齐。外观通过样式类选择：不加样式类即填充（primary），此外还有 secondary、muted、tinted（primary 融入背景）、outline（背景上的边框）、ghost（无表面，占满宽度）与 destructive。Reaction 设置一个 muted 胶囊的内容，该胶囊悬在末端一侧的下边缘之外；reaction-top 将其移到上边缘，reaction-start 移到起始一侧。Message 在气泡周围补充头像、页头与页脚。
示例
七种外观。
Live demo unavailable
<StackPanel Width="360" Spacing="8" HorizontalAlignment="Left">
<uikit:Bubble Content="Filled" />
<uikit:Bubble Classes="secondary" Content="Secondary" />
<uikit:Bubble Classes="muted" Content="Muted" />
<uikit:Bubble Classes="tinted" Content="Tinted" />
<uikit:Bubble Classes="outline" Content="Outline" />
<uikit:Bubble Classes="ghost" Content="Ghost" />
<uikit:Bubble Classes="destructive" Content="Destructive" />
</StackPanel>回应分别置于默认位置、使用 reaction-start，以及在 end 气泡上使用 reaction-top。
Live demo unavailable
<StackPanel Width="360" Spacing="28" Margin="0,20" HorizontalAlignment="Left">
<uikit:Bubble Classes="secondary start" Content="Can you review this draft?" Reaction="+2" />
<uikit:Bubble Classes="secondary start reaction-start" Content="Can you review this draft?" Reaction="+2" />
<uikit:Bubble Classes="end reaction-top" Content="Sure, I will take a look." Reaction="+1" />
</StackPanel>