Spinner

旋转的加载图标，即带命名主题的 ProgressBar。

示例可交互

Spinner — Avalonia UIKit

Live demo unavailable

<ProgressBar Theme="{StaticResource UIKitSpinner}" />

用法

ProgressBar Theme="{StaticResource UIKitSpinner}" 绘制一个加载图标，每 0.8 秒旋转一圈，每圈带有缓入缓出。主题会自行设置 IsIndeterminate，图标使用 Foreground，默认为文字颜色。尺寸：xsmall（12px）、small（14px）、large（24px）；medium（16px）无需样式类。

示例

四种尺寸。

尺寸可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="xsmall" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="small" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="large" VerticalAlignment="Center" />
</StackPanel>

文字旁的加载指示、使用弱化颜色的一个，以及禁用的按钮内使用按钮前景色的一个。

行内可交互

Live demo unavailable

<StackPanel Spacing="12" HorizontalAlignment="Left">
  <StackPanel Orientation="Horizontal" Spacing="8">
    <ProgressBar Theme="{StaticResource UIKitSpinner}" VerticalAlignment="Center" />
    <TextBlock Text="Loading…" VerticalAlignment="Center" />
  </StackPanel>
  <StackPanel Orientation="Horizontal" Spacing="8">
    <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="small" Foreground="{DynamicResource UIKit.MutedForeground}" VerticalAlignment="Center" />
    <TextBlock Text="Syncing 3 files" Foreground="{DynamicResource UIKit.MutedForeground}" VerticalAlignment="Center" />
  </StackPanel>
  <Button Classes="primary" IsEnabled="False" HorizontalAlignment="Left">
    <StackPanel Orientation="Horizontal" Spacing="8">
      <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="small" Foreground="{DynamicResource UIKit.PrimaryForeground}" VerticalAlignment="Center" />
      <TextBlock Text="Please wait" VerticalAlignment="Center" />
    </StackPanel>
  </Button>
</StackPanel>

uikit:Spinners.Icon 用另一段图标几何数据替换加载图标，这里使用 UIKit.Icon.LoaderCircle，分别为纯色与青色。

Icon可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="8">
  <ProgressBar Theme="{StaticResource UIKitSpinner}" uikit:Spinners.Icon="{StaticResource UIKit.Icon.LoaderCircle}" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" uikit:Spinners.Icon="{StaticResource UIKit.Icon.LoaderCircle}"
               Foreground="{DynamicResource UIKit.Cyan}" />
</StackPanel>

Spinner

#用法

#示例

用法

示例