跳到正文
浏览文档

TextLabel

带次要文本、匹配高亮与遮罩的标签,即 uikit:TextLabel。

示例可交互
TextLabel — Avalonia UIKit
Live demo unavailable
<StackPanel Spacing="12" Width="320" HorizontalAlignment="Left">
  <uikit:TextLabel Text="Account details" />
  <uikit:TextLabel Text="Company address" Secondary="(optional)" />
  <uikit:TextLabel Text="Workspace owner" Secondary="Administrator" FontWeight="SemiBold" />
  <uikit:TextLabel Text="Design system documentation" Highlights="doc" />
  <uikit:TextLabel Text="Design system documentation" Highlights="design" HighlightsMatch="Prefix" />
  <uikit:TextLabel Text="sk-live-3f9a2c" IsMasked="True" />
</StackPanel>

用法

uikit:TextLabel 是内置了 Label 外观的 TextBlock,并把标签的功能做成属性:Secondary 在一个空格之后添加 muted 文本,Highlights 把查询的不区分大小写匹配着色为蓝色(所有匹配,或在 HighlightsMatch="Prefix" 时只匹配文本开头的一个),IsMasked 为每个字符显示一个 •。尺寸、字重、颜色与对齐则使用 TextBlock 的 FontSize、FontWeight、Foreground 与 TextAlignment。

示例

在输入框中输入即可高亮两个标签中的匹配内容;Mask 会隐藏它们的文本。

高亮可交互
Live demo unavailable
<StackPanel Spacing="16" Width="320" HorizontalAlignment="Left">
  <StackPanel Orientation="Horizontal" Spacing="8">
    <TextBox Name="Query" Width="240" PlaceholderText="Search labels" Text="s" />
    <ToggleButton Name="Mask" Classes="outline" Content="Mask" />
  </StackPanel>
  <Border Padding="16" CornerRadius="8" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
    <StackPanel Spacing="12">
      <uikit:TextLabel Text="Design system documentation"
                       Highlights="{Binding #Query.Text}" IsMasked="{Binding #Mask.IsChecked}" />
      <uikit:TextLabel Text="Release notes" Secondary="(2 new)"
                       Highlights="{Binding #Query.Text}" IsMasked="{Binding #Mask.IsChecked}" />
    </StackPanel>
  </Border>
</StackPanel>