Description List

以网格排布的标签与值，支持跨列与分隔行。

示例可交互

Description List — Avalonia UIKit

Live demo unavailable

<uikit:DescriptionList Width="600" HorizontalAlignment="Left">
  <uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
  <uikit:DescriptionItem Label="Version" Value="0.1.0" />
  <uikit:DescriptionItem Label="License" Value="MIT" />
  <uikit:DescriptionItem Label="Platform" Value="macOS, Windows, Linux" Span="2" />
  <uikit:DescriptionItem Label="Status" Value="Stable" />
  <uikit:DescriptionSeparator />
  <uikit:DescriptionItem Label="Author" Value="supermomonga" />
</uikit:DescriptionList>

用法

uikit:DescriptionList 把 uikit:DescriptionItem 按 Columns 列排成行，每项包含一个 Label 与一个 Value（值即内容，因此可以是控件）。项可以占 Span 列；当下一项的跨度会超出列数时开始新的一行，未占满的一行中各项会伸展以填满该行。uikit:DescriptionSeparator 是横跨整行的 8px 分隔带。列表默认带边框：1px 边框并使用主题圆角，行之间有一条分隔线，标签底色上是 muted 的 14px 标签，旁边是 16px 的值。

属性或样式类	作用
`Columns`	每行的项数，1 到 10（默认 3）。
`Orientation`	`Horizontal`（默认）把标签放在值旁边，`Vertical` 放在值上方。
`IsBordered`	设为 `False` 去掉边框、分隔线、标签底色与单元格内边距。
`LabelWidth`	值旁标签的宽度（默认 120）。
`small`、`large`	单元格内边距为 4×2 或 12×6，而非 8×4；无边框时行间距为 2 或 8，而非 4。

示例

Orientation="Vertical" 把每个标签放在其值上方。

垂直可交互

Live demo unavailable

<uikit:DescriptionList Orientation="Vertical" Width="600" HorizontalAlignment="Left">
  <uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
  <uikit:DescriptionItem Label="Version" Value="0.1.0" />
  <uikit:DescriptionItem Label="License" Value="MIT" />
  <uikit:DescriptionItem Label="Platform" Value="macOS, Windows, Linux" Span="2" />
  <uikit:DescriptionItem Label="Status" Value="Stable" />
</uikit:DescriptionList>

IsBordered="False" 得到无边框、无底色、无内边距的纯网格，两种方向都适用。

无边框可交互

Live demo unavailable

<StackPanel Spacing="24" HorizontalAlignment="Left">
  <uikit:DescriptionList IsBordered="False" Width="600">
    <uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
    <uikit:DescriptionItem Label="Version" Value="0.1.0" />
    <uikit:DescriptionItem Label="License" Value="MIT" />
    <uikit:DescriptionItem Label="Platform" Value="macOS, Windows, Linux" Span="2" />
    <uikit:DescriptionItem Label="Status" Value="Stable" />
  </uikit:DescriptionList>
  <uikit:DescriptionList IsBordered="False" Orientation="Vertical" Width="600">
    <uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
    <uikit:DescriptionItem Label="Version" Value="0.1.0" />
    <uikit:DescriptionItem Label="License" Value="MIT" />
  </uikit:DescriptionList>
</StackPanel>

尺寸样式类改变内边距；这里的大尺寸列表为两列，标签宽 100px。

尺寸可交互

Live demo unavailable

<StackPanel Spacing="24" HorizontalAlignment="Left">
  <uikit:DescriptionList Classes="small" Width="600">
    <uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
    <uikit:DescriptionItem Label="Version" Value="0.1.0" />
    <uikit:DescriptionItem Label="License" Value="MIT" />
  </uikit:DescriptionList>
  <uikit:DescriptionList Classes="large" Columns="2" LabelWidth="100" Width="600">
    <uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
    <uikit:DescriptionItem Label="Version" Value="0.1.0" />
    <uikit:DescriptionItem Label="License" Value="MIT" />
  </uikit:DescriptionList>
</StackPanel>

Description List

#用法

#示例

用法

示例