# MTag 标签

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/tag/freepass)
- 平台：移动端
- 维护者：陈佳敏
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MTag]

## 代码演示

### 基础用法

```jsx
import { Component } from 'react';
import { constantsM, MTag } from '@weapp/ui';

const prefixCls = `${constantsM.uiMClsPrefix}-demo-tag`;

class MTagDemo extends Component {
  onClose = () => {
    console.log('close')
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>1. 大标签</p>
        <MTag size='large'>大标签</MTag>
        <MTag size='large' disabled>大标签禁用</MTag>
        <MTag size='large' checked={true}>大标签选中</MTag>

        <p>2. 中等标签</p>
        <MTag size='medium'>中等标签</MTag>
        <MTag size='medium' disabled>中等标签禁用</MTag>
        <MTag size='medium' checked={true}>中等标签选中</MTag>
        <MTag size='medium' closable onClose={this.onClose}>中等标签可删除</MTag>
        
        <p>2. 中等圆角标签</p>
        <MTag size='medium' radius>中等圆角标签</MTag>
        <MTag size='medium' radius disabled>中等圆角标签禁用</MTag>
        <MTag size='medium' radius checked={true}>中等圆角标签选中</MTag>
        <MTag size='medium' radius closable onClose={this.onClose}>中等圆角标签可删除</MTag>

        <p>3. 小标签</p>
        <MTag size='small'>小标签</MTag>
        <MTag size='small' disabled>小标签禁用</MTag>
        
        <p>4. 小标签自定义颜色</p>
        <MTag type='#FFCD50' size='small'>小标签</MTag>
        <MTag type='#40D8AD' size='small'>小标签</MTag>
        <MTag type='#FF666A' size='small'>小标签</MTag>
      </div>
    );
  }
}

export default MTagDemo;
```

### 自定义样式

```jsx
import { Component } from 'react';
import { constantsM, MTag } from '@weapp/ui';
import { classnames } from '@weapp/utils';
import { needRTL } from '../../../../utils';

const prefixCls = `${constantsM.uiMClsPrefix}-demo-tag`;

class MTagDemo extends Component {
  render() {
    const style = { color: '#333333', borderColor: '#B2B2B2' };
    const cls = classnames('customRenderStyle', {'customRenderStyle-rtl': needRTL?.()})
    return (
      <div className={prefixCls}>
        <p>大标签选中样式自定义</p>
        <MTag checked className={cls} size='large'>大标签选中</MTag>
        <MTag checked style={style} size='large'>大标签选中</MTag>
      </div>
    );
  }
}

export default MTagDemo;
```

## API

### 参数说明如下：

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