Marker

带图标或加载指示的弱化状态行，可选分隔线。

示例可交互

Marker — Avalonia UIKit

Live demo unavailable

<StackPanel Spacing="16" Width="420" HorizontalAlignment="Left">
  <uikit:Marker Content="Conversation archived">
    <uikit:Marker.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
    </uikit:Marker.Icon>
  </uikit:Marker>
  <uikit:Marker Classes="separator" Content="Today" />
  <uikit:Marker Classes="border" Content="Earlier messages" />
</StackPanel>

用法

uikit:Marker 是用于对话或时间线的弱化状态行，文字 14px：先是 16px 方框中的 Icon，然后是内容，两者间距 8px。HorizontalContentAlignment 决定行的位置：Left（默认）、Center 或 Right。处于 IsLoading 且没有图标时，改由一个小号加载指示器打头。

样式类	含义
`separator`	用边框色的 1px 线条填满行的其余部分：内容居中时在两侧，内容靠到某一端时在一侧。
`border`	底部边框，行下方留 8px。
`shimmer`	加载时文字内容以微光效果代替加载指示器（其他内容则做脉冲）。

示例

HorizontalContentAlignment 把内容及其分隔线置于起始、居中或末尾；没有分隔线时，整行本身会移动。

对齐可交互

Live demo unavailable

<StackPanel Spacing="16" Width="420" HorizontalAlignment="Left">
  <uikit:Marker Classes="separator" Content="Start" HorizontalContentAlignment="Left" />
  <uikit:Marker Classes="separator" Content="Center" />
  <uikit:Marker Classes="separator" Content="End" HorizontalContentAlignment="Right" />
  <uikit:Marker Content="Online" HorizontalContentAlignment="Center">
    <uikit:Marker.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.CircleCheck}" />
    </uikit:Marker.Icon>
  </uikit:Marker>
  <uikit:Marker Content="Seen 2 minutes ago" HorizontalContentAlignment="Right" />
</StackPanel>

IsLoading 以加载指示器打头，或配合 shimmer 让文字呈现微光；分隔线保持不变。

加载可交互

Live demo unavailable

<StackPanel Spacing="16" Width="320" HorizontalAlignment="Left">
  <uikit:Marker Content="Thinking" IsLoading="True" />
  <uikit:Marker Classes="shimmer" Content="Thinking" IsLoading="True" />
  <uikit:Marker Classes="separator" Content="Loading older messages" IsLoading="True" />
</StackPanel>

Marker

#用法

#示例

用法

示例