Empty

空状态：媒体、标题、描述与操作，居中排列。

示例可交互

Empty — Avalonia UIKit

Live demo unavailable

<uikit:EmptyState Classes="icon-media" Title="No projects yet" Description="Create your first project to get started."
                 Width="420" HorizontalAlignment="Left">
  <uikit:EmptyState.Media>
    <PathIcon Data="{StaticResource UIKit.Icon.Folder}" />
  </uikit:EmptyState.Media>
  <uikit:EmptyState.Actions>
    <StackPanel Orientation="Horizontal" Spacing="8">
      <Button Classes="primary" Content="Create project" />
      <Button Classes="outline" Content="Import project" />
    </StackPanel>
  </uikit:EmptyState.Actions>
</uikit:EmptyState>

用法

uikit:EmptyState 居中排列一列内容，内边距 24px、间距 16px，圆角半径 12：先是头部（Media，然后是间距 8px 的 Title 与 Description，最宽 384px），接着是 Actions，最后是内容。标题为 14px 中等字重，描述为 14px 弱化文字；两者均居中并自动换行。Media 可接受任意控件（图标、图片、头像），icon-media 样式类会把它装进 32px 的弱化色方块中。每个部分都是可选的。该控件命名为 EmptyState，因为 “Empty” 在 Avalonia 应用中含义不够明确。

示例

作为普通媒体的 40px 图标、使用 icon-media 的带边框空状态、仅有标题的空状态，以及内容位于操作下方的空状态。

变体可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="16">
  <!-- A plain media: any control, here a 40px icon. -->
  <uikit:EmptyState Title="Inbox zero" Description="You have read every message." Width="300">
    <uikit:EmptyState.Media>
      <PathIcon Data="{StaticResource UIKit.Icon.Inbox}" Width="40" Height="40" />
    </uikit:EmptyState.Media>
  </uikit:EmptyState>
  <!-- Bordered, with the icon in its muted square. -->
  <uikit:EmptyState Classes="icon-media" Title="No results" Description="Try a different search term." Width="300"
                   BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1">
    <uikit:EmptyState.Media>
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </uikit:EmptyState.Media>
  </uikit:EmptyState>
  <!-- A title alone. -->
  <uikit:EmptyState Title="Nothing here" Width="300" />
  <!-- Content below the actions. -->
  <uikit:EmptyState Classes="icon-media" Title="No files" Width="300">
    <uikit:EmptyState.Media>
      <PathIcon Data="{StaticResource UIKit.Icon.File}" />
    </uikit:EmptyState.Media>
    <uikit:EmptyState.Actions>
      <Button Classes="outline" Content="Upload" />
    </uikit:EmptyState.Actions>
    <TextBlock Text="Drop files here, or upload them." Foreground="{DynamicResource UIKit.MutedForeground}" />
  </uikit:EmptyState>
</WrapPanel>

Empty

#用法

#示例

用法

示例