## 简介

标签常用于内容分类、状态标识、筛选条件标识等场景。

## 示例

### 基础形态

```tsx
import React from 'react';
import { Tag, Grid } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  return (
    <div>
      <h4>默认尺寸24px</h4>
      <Row>
        <Col>
          <Tag color="red">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="orange">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="yellow">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="green">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="blue">默认标签</Tag>
        </Col>
      </Row>
      <br />
      <h4>小号尺寸20px</h4>
      <Row>
        <Col>
          <Tag color="red" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="orange" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="yellow" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="green" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="blue" size="small">默认标签</Tag>
        </Col>
      </Row>
    </div>
  );
};

export const meta = {
  title: '静态展示标签不支持悬停以及激活状态，仅静态展示标签支持彩色样式',
  describe: '',
};

```

### 可交互形态

```tsx
import React from 'react';
import { Tag, Grid, Icon } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  return (
    <div>
      <h4>默认</h4>
      <Row>
        <Col>
          <Tag>默认标签</Tag>
        </Col>
        <Col>
          <Tag.Closable>默认标签</Tag.Closable>
        </Col>
        <Col>
          <Tag><Icon type="sub-account-line" />默认标签</Tag>
        </Col>
      </Row>
      <br />
      <h4>激活/选中</h4>
      <Row>
        <Col>
          <Tag.Selectable checked>默认标签</Tag.Selectable>
        </Col>
        <Col>
          <Tag.Selectable checked>默认标签<Icon type="close" /></Tag.Selectable>
        </Col>
        <Col>
          <Tag.Selectable checked><Icon type="sub-account-line" />默认标签</Tag.Selectable>
        </Col>
      </Row>
      <br />
      <h4>禁用</h4>
      <Row>
        <Col>
          <Tag disabled>默认标签</Tag>
        </Col>
        <Col>
          <Tag.Closable disabled>默认标签</Tag.Closable>
        </Col>
        <Col>
          <Tag disabled><Icon type="sub-account-line" />默认标签</Tag>
        </Col>
      </Row>
    </div>
  );
};

export const meta = {
  title: '可点击或可删除类的动态交互标签，不支持彩色样式',
  describe: '',
};

```

## API

### Tag

| 参数        | 说明                                                                          | 类型                                                                                                   | 默认值   | 是否必填 | 支持版本 |
| ----------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- |
| type        | 标签的类型                                                                    | 'normal' | 'primary'                                                                                  | 'normal' |          | -        |
| size        | 标签的尺寸                                                                    | 'small' | 'medium' | 'large'                                                                         | -        |          | -        |
| color       | 标签颜色，目前支持：blue、green、orange、red、turquoise、yellow 和 hex 颜色值 | string                                                                                                 | -        |          | 1.19.0   |
| animation   | 是否开启动效                                                                  | boolean                                                                                                | false    |          | -        |
| afterAppear | 标签出现动画结束后执行的回调                                                  | (node: HTMLElement) => void                                                                            | -        |          | -        |
| onClick     | 点击回调                                                                      | (<br/> event: React.MouseEvent\<HTMLDivElement> | React.KeyboardEvent\<HTMLDivElement><br/> ) => void | -        |          | -        |

### Tag.Closeable

继承 Tag 的所有属性

| 参数       | 说明                                                                                                                       | 类型                                                     | 默认值 | 是否必填 |
| ---------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------ | -------- |
| closeArea  | closeable 标签的 onClose 响应区域                                                                                          | CloseArea                                                | 'tail' |          |
| onClose    | 点击关闭按钮时的回调<br/><br/>**签名**:<br/>**参数**:<br/>*from*: 事件来源<br/>**返回值**:<br/>true 则关闭，false 阻止关闭 | (from: CloseArea, node?: HTMLElement | null) => boolean | -      |          |
| afterClose | 标签关闭后执行的回调                                                                                                       | (node: HTMLElement | null) => void                      | -      |          |

### Tag.Selectable

继承 Tag 的所有属性

| 参数           | 说明                             | 类型                                                                                                                      | 默认值 | 是否必填 |
| -------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
| checked        | 标签是否被选中，受控用法         | boolean                                                                                                                   | -      |          |
| defaultChecked | 标签是否默认被选中，非受控用法。 | boolean                                                                                                                   | -      |          |
| onChange       | 选中状态变化时触发的事件         | (<br/> checked: boolean,<br/> e: React.MouseEvent\<HTMLDivElement> | React.KeyboardEvent\<HTMLDivElement><br/> ) => void | -      |          |

### CloseArea

示例：

* tag: 标签体
* tail: 关闭按钮

```typescript
export type CloseArea = 'tag' | 'tail';
```

## 无障碍键盘操作指南

| 按键  | 说明                     |
| :---- | :----------------------- |
| SPACE | 选择，取消或删除当前标签 |

## 更多示例

```tsx
```

```tsx
```