Ant Design 标签

Ant Design 标签是一种可重复使用的 UI 组件，用于在页面中展示和交互标识属性或者对象。基于 React 的 Ant Design 标签组件提供了多种样式，包括标签的大小、颜色、形状等。

安装

使用 npm 或 yarn 安装 antd 包：

npm install antd --save

或者

yarn add antd

使用

在需要使用标签的组件中导入 Tag 组件并使用：

import { Tag } from 'antd';

function MyComponent() {
  return (
    <div>
      <Tag color="red">红色标签</Tag>
      <Tag color="green">绿色标签</Tag>
      <Tag color="blue">蓝色标签</Tag>
    </div>
  );
}

export default MyComponent;

以上代码将展示三个不同颜色的标签。

API

Tag

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | closable | 是否可关闭 | boolean | false | | color | 标签颜色 | string | - | | visible | 是否可见 | boolean | true | | onClose | 关闭时的回调函数 | function(e) | - |

CheckableTag

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | checked | 是否选中 | boolean | false | | onChange | 选中状态改变时的回调函数 | function(checked) | - | | children | 子元素，直接传入字符串即可 | any | - |

示例

基本用法

import { Tag } from 'antd';

function MyComponent() {
  return (
    <div>
      <Tag color="red">红色标签</Tag>
      <Tag color="green">绿色标签</Tag>
      <Tag color="blue">蓝色标签</Tag>
    </div>
  );
}

export default MyComponent;

可关闭

import { Tag } from 'antd';

function MyComponent() {
  return (
    <div>
      <Tag color="red" closable>红色标签</Tag>
      <Tag color="green" closable>绿色标签</Tag>
      <Tag color="blue" closable>蓝色标签</Tag>
    </div>
  );
}

export default MyComponent;

可切换

import { CheckableTag } from 'antd';
import { useState } from 'react';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  function handleChange(checked) {
    setChecked(checked);
  }

  return (
    <div>
      <CheckableTag checked={checked} onChange={handleChange}>可切换标签</CheckableTag>
    </div>
  );
}

export default MyComponent;

参考链接

• Ant Design - Tag
• Ant Design - CheckableTag