Badge

显示在内容右上角的计数、圆点或图标。

示例可交互

Badge — Avalonia UIKit

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Count="3">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge IsDot="True">
    <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Bell}" />
  </uikit:Badge>
  <uikit:Badge Icon="{StaticResource UIKit.Icon.Check}">
    <uikit:Avatar UserName="Jason Lee" />
  </uikit:Badge>
</StackPanel>

用法

uikit:Badge 包裹其内容，并绘制在内容的右上角，自身不占空间：Count 绘制在至少 14px 宽的胶囊上，IsDot="True" 时是一个 6px 的圆点，Icon 则绘制在右下角带环的圆中。计数为 0 时不显示任何内容；超过 Maximum（默认 99）时显示 "99+"。图标优先于圆点，圆点优先于计数。颜色由 BadgeBackground 决定，默认为主题的红色（而不是属于内容的 Background）。尺寸 small、默认的 medium 与 large 会移动计数的位置，并调整图标圆的大小。

属性	作用
`Count`	显示的数字；为 0 时隐藏徽标。
`Maximum`	按原样显示的最大数字；超过时显示 "Maximum+"。
`IsDot`	用 6px 的圆点代替计数。
`Icon`	位于右下角的几何图形，圆的大小按尺寸为 10、16 或 24px。
`BadgeBackground`	徽标的画刷。

示例

3、12 与 100（显示为 99+）的计数，以及 Maximum="9" 时的 12。

计数可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Count="3">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="12">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="100">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="12" Maximum="9">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
</StackPanel>

徽标上的 small 与 large，分别带计数与圆点；圆点始终保持 6px。

尺寸可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Classes="small" Count="3" VerticalAlignment="Bottom">
    <Border Width="24" Height="24" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="3" VerticalAlignment="Bottom">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Classes="large" Count="3" VerticalAlignment="Bottom">
    <Border Width="48" Height="48" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Classes="small" IsDot="True" VerticalAlignment="Bottom">
    <Border Width="24" Height="24" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Classes="large" IsDot="True" VerticalAlignment="Bottom">
    <Border Width="48" Height="48" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
</StackPanel>

BadgeBackground 接受任意画刷，例如主题的调色板颜色。

颜色可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Count="5" BadgeBackground="{DynamicResource UIKit.Blue}">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="5" BadgeBackground="{DynamicResource UIKit.Green}">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="5" BadgeBackground="{DynamicResource UIKit.Yellow}">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge IsDot="True" BadgeBackground="{DynamicResource UIKit.Green}">
    <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Bell}" />
  </uikit:Badge>
</StackPanel>

Badge

#用法

#示例

用法

示例