TextLabel
带次要文本、匹配高亮与遮罩的标签,即 uikit:TextLabel。
示例可交互
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>