Tag

一个小巧的彩色标签，可实心或描边，使用主题与调色板中的颜色。

示例可交互

Tag — Avalonia UIKit

Live demo unavailable

<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>

用法

uikit:TagLabel（之所以这样命名，是因为每个 Avalonia 控件都已有一个 Tag 属性）在一个带边框的小标签上显示其 Content。颜色通过样式类指定：primary（默认）、secondary、danger、success、warning、info，或调色板颜色：neutral、gray、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose。outline 保留边框，并让文字使用该颜色。样式类可以组合，例如 Classes="rose outline small"。悬停的标签会淡至 90%。

样式类	文字与内边距
`xsmall`、`small`	10px，6×2，圆角半径 3
默认	12px，10×4
`large`	14px，10×4
`rounded-full`	任意尺寸下都是胶囊形

示例

outline 搭配每种主题色。

Outline可交互

Live demo unavailable

<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>

各种尺寸，以及在小尺寸和中尺寸标签上使用 rounded-full。

尺寸可交互

Live demo unavailable

<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>

十九种调色板颜色，实心以及搭配 outline。

颜色可交互

Live demo unavailable

<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>

Tag

#用法

#示例

用法

示例