Label

固定的行高与次要文字，适用于 TextBlock 与 Label。

示例可交互

Label — Avalonia UIKit

Live demo unavailable

<StackPanel Spacing="8" HorizontalAlignment="Left">
  <TextBlock Classes="label">Company address<Run Classes="secondary" Text=" (optional)" /></TextBlock>
  <Label Content="Label control" />
  <SelectableTextBlock Classes="label" Text="Selectable label" />
</StackPanel>

用法

TextBlock Classes="label"（以及 SelectableTextBlock）将文字以前景色绘制在固定的 20px 行高上，与字号无关，并在宽度受限时自动换行；其中的 Run Classes="secondary" 为弱化色。字号与字重由应用的 FontSize 和 FontWeight 提供；主题的文字尺寸是资源 UIKit.FontSize.Xs、UIKit.FontSize.Sm、UIKit.FontSize.Base 和 UIKit.FontSize.Lg。Avalonia 的 Label 控件获得同样的外观，并保留其 Target。TextBlock 没有自己的默认主题，因为那会改变每个模板中的文字。

uikit:TextLabel 把标签的外观、次要文字、高亮和掩码整合为一个控件。

示例

12 到 24 的字号共用同一 20px 行高；高于行高的文字会溢出，居中且不裁剪。

尺寸可交互

Live demo unavailable

<StackPanel Spacing="8" HorizontalAlignment="Left">
  <TextBlock Classes="label" FontSize="12" Text="Account details" />
  <TextBlock Classes="label" FontSize="14" Text="Account details" />
  <TextBlock Classes="label" FontSize="16" Text="Account details" />
  <TextBlock Classes="label" FontSize="18" Text="Account details" />
  <TextBlock Classes="label" FontSize="20" Text="Account details" />
  <TextBlock Classes="label" FontSize="24" Text="Account details" />
</StackPanel>

字重与次要文本段、用 Foreground 设置颜色，以及固定宽度下的 TextAlignment。

样式可交互

Live demo unavailable

<StackPanel Spacing="8" HorizontalAlignment="Left">
  <TextBlock Classes="label" FontWeight="Medium">Workspace owner<Run Classes="secondary" Text=" Administrator" /></TextBlock>
  <TextBlock Classes="label" FontWeight="SemiBold">Workspace owner<Run Classes="secondary" Text=" Administrator" /></TextBlock>
  <TextBlock Classes="label" FontWeight="Bold">Workspace owner<Run Classes="secondary" Text=" Administrator" /></TextBlock>
  <TextBlock Classes="label" Foreground="{DynamicResource UIKit.MutedForeground}" Text="Verified" />
  <TextBlock Classes="label" Foreground="{DynamicResource UIKit.Danger}" Text="Verification failed" />
  <TextBlock Classes="label" Width="240" TextAlignment="Center" Text="Centered" />
  <TextBlock Classes="label" Width="240" TextAlignment="Right" Text="Right aligned" />
</StackPanel>

宽度受限时标签会换行；LineHeight 可替换 20px 的行高。

换行可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="24" HorizontalAlignment="Left">
  <TextBlock Classes="label" Width="200"
             Text="Label should support text wrap in default, if the text is too long, it should wrap to the next line." />
  <TextBlock Classes="label" Width="200" LineHeight="28.8"
             Text="Label should support text wrap in default, if the text is too long, it should wrap to the next line." />
</StackPanel>

Label

#用法

#示例

用法

示例