Tag 标签

乌龙茶原创2024年4月26日大约 2 分钟

基础用法

由Type属性来选择Tag的类型

<nl:Tag Type="Primary">Tag 1</nl:Tag>
<nl:Tag Type="Success">Tag 2</nl:Tag>
<nl:Tag Type="Info">Tag 3</nl:Tag>
<nl:Tag Type="Warning">Tag 4</nl:Tag>
<nl:Tag Type="Danger">Tag 5</nl:Tag>

可移除标签

设置IsClosable属性可以定义一个标签是否可移除。它接受一个 Boolean。当 Tag 被移除时会触发 close 事件。

<nl:Tag IsClosable="True" Type="Primary" Close="Tag_Close">Tag 1</nl:Tag>
<nl:Tag IsClosable="True" Type="Success">Tag 2</nl:Tag>
<nl:Tag IsClosable="True" Type="Info">Tag 3</nl:Tag>
<nl:Tag IsClosable="True" Type="Warning">Tag 4</nl:Tag>
<nl:Tag IsClosable="True" Type="Danger">Tag 5</nl:Tag>

private void Tag_Close(object sender, RoutedEventArgs e)
{
    MessageBox.Show("确定要删除吗");
}

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

使用size属性来设置额外尺寸，可选值包括large、default、small，默认Default

<nl:Tag IsClosable="True" Size="Large" Type="Primary">
    Tag 1
</nl:Tag>
<nl:Tag IsClosable="True" Size="Default" Type="Success">
    Tag 2
</nl:Tag>
<nl:Tag IsClosable="True" Size="Small" Type="Info">
    Tag 3
</nl:Tag>

主题

Tag 组件提供了三个不同的主题：dark、light 和 plain。

通过设置Theme属性来改变主题，默认为 light。

<nl:Tag Theme="Dark" Type="Primary">Tag 1</nl:Tag>
<nl:Tag Theme="Dark" Type="Success">Tag 2</nl:Tag>
<nl:Tag Theme="Dark" Type="Info">Tag 3</nl:Tag>
<nl:Tag Theme="Dark" Type="Warning">Tag 4</nl:Tag>
<nl:Tag Theme="Dark" Type="Danger">Tag 5</nl:Tag>

<nl:Tag Type="Primary">Tag 1</nl:Tag>
<nl:Tag Type="Success">Tag 2</nl:Tag>
<nl:Tag Type="Info">Tag 3</nl:Tag>
<nl:Tag Type="Warning">Tag 4</nl:Tag>
<nl:Tag Type="Danger">Tag 5</nl:Tag>

<nl:Tag Theme="Plain" Type="Primary">Tag 1</nl:Tag>
<nl:Tag Theme="Plain" Type="Success">Tag 2</nl:Tag>
<nl:Tag Theme="Plain" Type="Info">Tag 3</nl:Tag>
<nl:Tag Theme="Plain" Type="Warning">Tag 4</nl:Tag>
<nl:Tag Theme="Plain" Type="Danger">Tag 5</nl:Tag>

圆形标签

Tag 可以向按钮组件一样变为完全圆形。

通过设置IsRound属性来改变是否圆形

<nl:Tag IsRound="True" Theme="Dark" Type="Primary">Tag 1</nl:Tag>
<nl:Tag IsRound="True" Theme="Dark" Type="Success">Tag 2</nl:Tag>
<nl:Tag IsRound="True" Theme="Dark" Type="Info">Tag 3</nl:Tag>
<nl:Tag IsRound="True" Theme="Dark" Type="Warning">Tag 4</nl:Tag>
<nl:Tag IsRound="True" Theme="Dark" Type="Danger">Tag 5</nl:Tag>

<nl:Tag IsRound="True" Type="Primary">Tag 1</nl:Tag>
<nl:Tag IsRound="True" Type="Success">Tag 2</nl:Tag>
<nl:Tag IsRound="True" Type="Info">Tag 3</nl:Tag>
<nl:Tag IsRound="True" Type="Warning">Tag 4</nl:Tag>
<nl:Tag IsRound="True" Type="Danger">Tag 5</nl:Tag>

<nl:Tag IsRound="True" Theme="Plain" Type="Primary">Tag 1</nl:Tag>
<nl:Tag IsRound="True" Theme="Plain" Type="Success">Tag 2</nl:Tag>
<nl:Tag IsRound="True" Theme="Plain" Type="Info">Tag 3</nl:Tag>
<nl:Tag IsRound="True" Theme="Plain" Type="Warning">Tag 4</nl:Tag>
<nl:Tag IsRound="True" Theme="Plain" Type="Danger">Tag 5</nl:Tag>