TextLabel
A label with secondary text, highlighted matches and a mask, as uikit:TextLabel.
ExampleInteractive
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>Usage
uikit:TextLabel is a TextBlock with the look of the Label built in and the label's features as properties: Secondary adds muted text after a space, Highlights colors the case-insensitive matches of a query blue (every match, or with HighlightsMatch="Prefix" only one at the start of the text), and IsMasked shows a • for each character. Sizes, weights, colors and alignment are the TextBlock's FontSize, FontWeight, Foreground and TextAlignment.
Examples
Type in the field to highlight the matches in both labels; Mask hides their text.
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>