Tag
A small colored label, filled or outlined, in the theme's and the palette's colors.
ExampleInteractive
<WrapPanel ItemSpacing="8" LineSpacing="8">
<uikit:TagLabel Content="Primary" />
<uikit:TagLabel Classes="secondary" Content="Secondary" />
<uikit:TagLabel Classes="danger" Content="Danger" />
<uikit:TagLabel Classes="success" Content="Success" />
<uikit:TagLabel Classes="warning" Content="Warning" />
<uikit:TagLabel Classes="info" Content="Info" />
</WrapPanel>Usage
uikit:TagLabel (named so because every Avalonia control already has a Tag property) shows its Content on a small bordered label. The color is a class: primary (the default), secondary, danger, success, warning, info, or a palette color: neutral, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. outline keeps the border and gives the text the color. The classes combine, as in Classes="rose outline small". A hovered tag fades to 90%.
| Class | Text and padding |
|---|---|
xsmall, small | 10px, 6×2, radius 3 |
| default | 12px, 10×4 |
large | 14px, 10×4 |
rounded-full | A pill at any size |
Examples
outline with each theme color.
<WrapPanel ItemSpacing="8" LineSpacing="8">
<uikit:TagLabel Classes="outline" Content="Primary" />
<uikit:TagLabel Classes="secondary outline" Content="Secondary" />
<uikit:TagLabel Classes="danger outline" Content="Danger" />
<uikit:TagLabel Classes="success outline" Content="Success" />
<uikit:TagLabel Classes="warning outline" Content="Warning" />
<uikit:TagLabel Classes="info outline" Content="Info" />
</WrapPanel>The sizes, and rounded-full on a small and on a medium tag.
<WrapPanel ItemSpacing="8" LineSpacing="8">
<uikit:TagLabel Classes="xsmall" Content="XSmall" VerticalAlignment="Center" />
<uikit:TagLabel Classes="small" Content="Small" VerticalAlignment="Center" />
<uikit:TagLabel Content="Medium" VerticalAlignment="Center" />
<uikit:TagLabel Classes="large" Content="Large" VerticalAlignment="Center" />
<uikit:TagLabel Classes="small rounded-full" Content="Rounded" VerticalAlignment="Center" />
<uikit:TagLabel Classes="rounded-full" Content="Rounded" VerticalAlignment="Center" />
</WrapPanel>The nineteen palette colors, filled and with outline.
<StackPanel Spacing="12" HorizontalAlignment="Left">
<WrapPanel ItemSpacing="8" LineSpacing="8" MaxWidth="560">
<uikit:TagLabel Classes="neutral" Content="Neutral" />
<uikit:TagLabel Classes="gray" Content="Gray" />
<uikit:TagLabel Classes="red" Content="Red" />
<uikit:TagLabel Classes="orange" Content="Orange" />
<uikit:TagLabel Classes="amber" Content="Amber" />
<uikit:TagLabel Classes="yellow" Content="Yellow" />
<uikit:TagLabel Classes="lime" Content="Lime" />
<uikit:TagLabel Classes="green" Content="Green" />
<uikit:TagLabel Classes="emerald" Content="Emerald" />
<uikit:TagLabel Classes="teal" Content="Teal" />
<uikit:TagLabel Classes="cyan" Content="Cyan" />
<uikit:TagLabel Classes="sky" Content="Sky" />
<uikit:TagLabel Classes="blue" Content="Blue" />
<uikit:TagLabel Classes="indigo" Content="Indigo" />
<uikit:TagLabel Classes="violet" Content="Violet" />
<uikit:TagLabel Classes="purple" Content="Purple" />
<uikit:TagLabel Classes="fuchsia" Content="Fuchsia" />
<uikit:TagLabel Classes="pink" Content="Pink" />
<uikit:TagLabel Classes="rose" Content="Rose" />
</WrapPanel>
<WrapPanel ItemSpacing="8" LineSpacing="8">
<uikit:TagLabel Classes="blue outline" Content="Blue" />
<uikit:TagLabel Classes="rose outline" Content="Rose" />
</WrapPanel>
</StackPanel>Not covered
- Arbitrary color combinations; set
Background,ForegroundandBorderBrushdirectly.