# Tag 标签

[toc]

`Tag` 组件用于进行标记和分类。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-tag": "../dist/tag/index"
  }
}

```

## 用法

### 标签颜色

通过 `variant` 属性来设置标签颜色，支持`default`、`primary`、`success`、`warning`、`danger` 五种类型，默认为 `default`。

```html
<tea-tag variant="default">标签</tea-tag>
<tea-tag variant="primary">标签</tea-tag>
<tea-tag variant="success">标签</tea-tag>
<tea-tag variant="warning">标签</tea-tag>
<tea-tag variant="danger">标签</tea-tag>
```

### 标签颜色填充方式

通过 `fill` 属性来指定按钮颜色填充方式，支持 `solid`、`outline` 两种方式。若选择 `outline` 方式，此时背景色为白色、文字与边框为按钮颜色，默认为 `solid`。

```html
<tea-tag variant="primary" fill="solid">标签</tea-tag>
<tea-tag variant="primary" fill="outline">标签</tea-tag>
```

### 圆角标签

通过 `round` 属性来设置为圆角标签。

```html
<tea-tag variant="primary" round>标签</tea-tag>
```

### 开启点击反馈

通过 `clickable` 属性来开启点击反馈。

```html
<tea-tag variant="primary" clickable></tea-tag>
```

### 标签尺寸

通过 `size` 属性来指定按钮尺寸，支持 `sm`、`md`、`lg` 三种尺寸，默认为 `sm`。

```html
<tea-tag variant="primary" size="sm">标签</tea-tag>
<tea-tag variant="primary" size="md">标签</tea-tag>
<tea-tag variant="primary" size="lg">标签</tea-tag>
```

## Props

| 参数        | 描述       | 类型        | 默认值       | 可选值                                                      |
| --------- | -------- | --------- | --------- | -------------------------------------------------------- |
| variant   | 标签颜色     | `String`  | `default` | `["default", "primary", "success", "warning", "danger"]` |
| size      | 标签尺寸     | `String`  | `sm`      | `["sm", "md", "lg"]`                                     |
| fill      | 标签颜色填充方式 | `String`  | `solid`   | `["solid", "outline"]`                                   |
| round     | 是否为圆角样式  | `Boolean` | `false`   | -                                                        |
| clickable | 是否能点击    | `Boolean` | `false`   | -                                                        |

## 事件

| 事件名        | 描述      |
| ---------- | ------- |
| bind:click | 点击标签时触发 |

## Slots

| 名称  | 描述      |
| --- | ------- |
| -   | 自定义显示内容 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                          | 默认值                         | 描述  |
| ---------------------------- | --------------------------- | --- |
| tag-sm-text-size             | @font-size-xxs              | -   |
| tag-md-text-size             | @font-size-xs               | -   |
| tag-lg-text-size             | @font-size-sm               | -   |
| tag-text-color               | @text-base-inverse-color    | -   |
| tag-default-text-color       | @text-secondary-color       | -   |
| tag-default-background-color | @background-secondary-color | -   |
| tag-default-border-color     | @border-secondary-color     | -   |
| tag-primary-text-color       | @text-primary-color         | -   |
| tag-primary-background-color | @background-primary-color   | -   |
| tag-primary-border-color     | @border-primary-color       | -   |
| tag-success-text-color       | @text-success-color         | -   |
| tag-success-background-color | @background-success-color   | -   |
| tag-success-border-color     | @border-success-color       | -   |
| tag-warning-text-color       | @text-warning-color         | -   |
| tag-warning-background-color | @background-warning-color   | -   |
| tag-warning-border-color     | @border-warning-color       | -   |
| tag-danger-text-color        | @text-danger-color          | -   |
| tag-danger-background-color  | @background-danger-color    | -   |
| tag-danger-border-color      | @border-danger-color        | -   |
| tag-padding                  | @padding-base 6px           | -   |
| tag-outline-background-color | transparent                 | -   |
| tag-border-radius            | @border-radius-default      | -   |
| tag-round-border-radius      | 10px                        | -   |