# Tag 标签

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/tag/freepass)
- 平台：PC
- 维护者：陈佳敏
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s32
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Tag]

## 代码演示

### 基础用法

基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 onClose beforeClose 事件

```jsx
import React, { Component } from 'react';
import { constants, Tag, Icon } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-tag`;

export default class TagDemo extends Component {

  // 删除标签时的事件
  handleClose = () => {
    console.log('标签已关闭');
  }

  // 点击关闭按钮后延迟 2s 关闭
  handleBeforeClose = () => {
    return new Promise((resolve, reject) => {
      setTimeout(function () {
        try {
          console.log('标签即将关闭');
          resolve(null);
        } catch (err) {
          console.log('标签不关闭');
          reject(null);
        }
      }, 2000);
    });
  }

  render() {
    return (
      <div className={prefixCls}>
        <div>
          <div className='tag-demo-label'>
            <h6>方形</h6>
          </div>
          <div className="tag-demo">
            <Tag title="标签1">方形标签</Tag>
          </div>
        </div>

        <div>
          <div className='tag-demo-label'>
            <h6>圆角标签</h6>
          </div>
          <div className='tag-demo'>
            <Tag radius>圆角标签</Tag>
          </div>
        </div>

        <div>
          <div className='tag-demo-label'>
            <h6>悬浮状态展现删除按钮</h6>
          </div>
          <div className='tag-demo'>
            <Tag
             
              closable
              onClose={this.handleClose}
            >删除</Tag>
            <Tag
             
              radius
              closable
              beforeClose={this.handleBeforeClose}
              onClose={this.handleClose}
              style={{ maxWidth: "80px" }}
            >点击关闭图标，延迟 2s 关闭</Tag>
          </div>
        </div>
      </div>
    );
  }
}
```

### 不同尺寸

```jsx
import React, { Component } from 'react';
import { constants, Tag } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-tag`;

export default class TagDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <div>
            <div className='tag-demo-label'>
                <h6>默认标签</h6>
            </div>
            <div className='tag-demo'>
                <Tag>默认标签</Tag>
                <Tag disabled>禁用状态</Tag>
            </div>
        </div>

        <div>
            <div className='tag-demo-label'>
                <h6>中等标签</h6>
            </div>
            <div className='tag-demo'>
                <Tag size='medium'>中等的标签</Tag>
                <Tag disabled size='medium'>禁用状态</Tag>
            </div>
        </div>
      
        <div>
            <div className='tag-demo-label'>
                <h6>小型标签</h6>
            </div>
            <div className='tag-demo'>
                <Tag size='small'>小号的标签</Tag>
                <Tag disabled size='small'>禁用状态</Tag>
            </div>
        </div>
      </div>
    );
  }
}
```

### 分类标签

标签提供"default" | "primary" | "success" | "warning" | danger 用作不同场景使用。如果预设值不能满足你的需求，可支持自定义背景色，自定义背景色时字体为白色

```jsx
import React, { Component } from 'react';
import { constants, Tag } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-tag`;

export default class TagDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <div>
            <div className='tag-demo-label'>
                <h6>方形标签</h6>
            </div>
            <div className='tag-demo'>
                <Tag type='default'>默认标签</Tag>
                <Tag type='primary'>主要标签</Tag>
                <Tag type='success'>成功标签</Tag>
                <Tag type='warning'>警告标签</Tag>
                <Tag type='danger'>危险标签</Tag>
            </div>
        </div>

        <div>
            <div className='tag-demo-label'>
                <h6>圆形标签</h6>
            </div>
            <div className='tag-demo'>
                <Tag radius type='default'>默认标签</Tag>
                <Tag radius type='primary'>主要标签</Tag>
                <Tag radius type='success'>成功标签</Tag>
                <Tag radius type='warning'>警告标签</Tag>
                <Tag radius type='danger'>危险标签</Tag>
            </div>
        </div>

        <div>
            <div className='tag-demo-label'>
                <h6>实心标签</h6>
            </div>
            <div className='tag-demo'>
                <Tag solid radius type='default'>默认标签</Tag>
                <Tag solid radius type='primary'>主要标签</Tag>
                <Tag solid radius type='success'>成功标签</Tag>
                <Tag solid radius type='warning'>警告标签</Tag>
                <Tag solid radius type='danger'>危险标签</Tag>
            </div>
        </div>
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |  |
| --- | --- | --- | --- | --- | --- | --- |
| radius | 是否是圆角标签 | boolean | 否 | false |  |  |
| closable | 是否可删除 | boolean | 否 | false |  |  |
| size | 标签尺寸 | 'small' 或 'medium' 或 'large' | 否 | 'large' |  |  |
| type | 标签分类 | `default` \| `primary` | `success` | `warning` \| `danger` | 否 | 'default' |
| solid | 是否是实心 | boolean | 否 | false |  |  |
| checked | 是否选中 | boolean | 否 | false |  |  |
| disabled | 是否禁用 | boolean | 否 | false |  |  |
| closeIcon | 自定义关闭按钮 | ReactNode | 否 | x |  |  |
| title | 提示文字 | string | 否 |  |  |  |
| onClose | 关闭后回调 | (e: React.MouseEvent) => void | 否 |  |  |  |
| beforeClose | 标签关闭前的回调 | (e: React.MouseEvent) => Promise | 否 |  |  |  |
| onCheck | 选中状态切换触发的函数 | (checked: boolean, e: React.MouseEvent) => void | 否 |  |  |  |
