Tag标签

进行标记和分类的小标签。

何时使用

用于标记事物的属性和维度。
进行分类。

代码演示

Tag 1

Link

Tag 2

Prevent Default

基本

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

TypeScript
JavaScript
import React from 'react';
import { Space, Tag } from 'antd';

const log = (e: React.MouseEvent<HTMLElement>) => {
  console.log(e);
};

const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
  e.preventDefault();
  console.log('Clicked! But prevent default.');
};

const App: React.FC = () => (
  <Space size={[0, 8]} wrap>
    <Tag>Tag 1</Tag>
    <Tag>
      <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
    </Tag>
    <Tag closable onClose={log}>
      Tag 2
    </Tag>
    <Tag closable onClose={preventDefault}>
      Prevent Default
    </Tag>
  </Space>
);

export default App;

Unremovable

Tag 2

Tag 3

New Tag

动态添加和删除

用数组生成一组标签，可以动态添加和删除。

TypeScript
JavaScript
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Space, Input, Tag, Tooltip, theme } from 'antd';

const App: React.FC = () => {
  const { token } = theme.useToken();
  const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [editInputIndex, setEditInputIndex] = useState(-1);
  const [editInputValue, setEditInputValue] = useState('');
  const inputRef = useRef<InputRef>(null);
  const editInputRef = useRef<InputRef>(null);

  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus();
    }
  }, [inputVisible]);

  useEffect(() => {
    editInputRef.current?.focus();
  }, [inputValue]);

  const handleClose = (removedTag: string) => {
    const newTags = tags.filter((tag) => tag !== removedTag);
    console.log(newTags);
    setTags(newTags);
  };

  const showInput = () => {
    setInputVisible(true);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    if (inputValue && tags.indexOf(inputValue) === -1) {
      setTags([...tags, inputValue]);
    }
    setInputVisible(false);
    setInputValue('');
  };

  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEditInputValue(e.target.value);
  };

  const handleEditInputConfirm = () => {
    const newTags = [...tags];
    newTags[editInputIndex] = editInputValue;
    setTags(newTags);
    setEditInputIndex(-1);
    setInputValue('');
  };

  const tagInputStyle: React.CSSProperties = {
    width: 78,
    verticalAlign: 'top',
  };

  const tagPlusStyle: React.CSSProperties = {
    background: token.colorBgContainer,
    borderStyle: 'dashed',
  };

  return (
    <Space size={[0, 8]} wrap>
      <Space size={[0, 8]} wrap>
        {tags.map((tag, index) => {
          if (editInputIndex === index) {
            return (
              <Input
                ref={editInputRef}
                key={tag}
                size="small"
                style={tagInputStyle}
                value={editInputValue}
                onChange={handleEditInputChange}
                onBlur={handleEditInputConfirm}
                onPressEnter={handleEditInputConfirm}
              />
            );
          }
          const isLongTag = tag.length > 20;
          const tagElem = (
            <Tag
              key={tag}
              closable={index !== 0}
              style={{ userSelect: 'none' }}
              onClose={() => handleClose(tag)}
            >
              <span
                onDoubleClick={(e) => {
                  if (index !== 0) {
                    setEditInputIndex(index);
                    setEditInputValue(tag);
                    e.preventDefault();
                  }
                }}
              >
                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
              </span>
            </Tag>
          );
          return isLongTag ? (
            <Tooltip title={tag} key={tag}>
              {tagElem}
            </Tooltip>
          ) : (
            tagElem
          );
        })}
      </Space>
      {inputVisible ? (
        <Input
          ref={inputRef}
          type="text"
          size="small"
          style={tagInputStyle}
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleInputConfirm}
          onPressEnter={handleInputConfirm}
        />
      ) : (
        <Tag style={tagPlusStyle} onClick={showInput}>
          <PlusOutlined /> New Tag
        </Tag>
      )}
    </Space>
  );
};

export default App;

Tag 1Tag 2Tag 3

New Tag

添加动画

使用 rc-tween-one 给标签增加添加或删除动画。

TypeScript
JavaScript
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Input, Tag, theme } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';

const App: React.FC = () => {
  const { token } = theme.useToken();
  const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const inputRef = useRef<InputRef>(null);

  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus();
    }
  }, [inputVisible]);

  const handleClose = (removedTag: string) => {
    const newTags = tags.filter((tag) => tag !== removedTag);
    console.log(newTags);
    setTags(newTags);
  };

  const showInput = () => {
    setInputVisible(true);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    if (inputValue && tags.indexOf(inputValue) === -1) {
      setTags([...tags, inputValue]);
    }
    setInputVisible(false);
    setInputValue('');
  };

  const forMap = (tag: string) => {
    const tagElem = (
      <Tag
        closable
        onClose={(e) => {
          e.preventDefault();
          handleClose(tag);
        }}
      >
        {tag}
      </Tag>
    );
    return (
      <span key={tag} style={{ display: 'inline-block' }}>
        {tagElem}
      </span>
    );
  };

  const tagChild = tags.map(forMap);

  const tagPlusStyle = {
    background: token.colorBgContainer,
    borderStyle: 'dashed',
  };

  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <TweenOneGroup
          enter={{
            scale: 0.8,
            opacity: 0,
            type: 'from',
            duration: 100,
          }}
          onEnd={(e) => {
            if (e.type === 'appear' || e.type === 'enter') {
              (e.target as any).style = 'display: inline-block';
            }
          }}
          leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
          appear={false}
        >
          {tagChild}
        </TweenOneGroup>
      </div>
      {inputVisible ? (
        <Input
          ref={inputRef}
          type="text"
          size="small"
          style={{ width: 78 }}
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleInputConfirm}
          onPressEnter={handleInputConfirm}
        />
      ) : (
        <Tag onClick={showInput} style={tagPlusStyle}>
          <PlusOutlined /> New Tag
        </Tag>
      )}
    </>
  );
};

export default App;

Without icon

success

processing

error

warning

default

With icon

success

processing

error

warning

waiting

stop

预设状态的标签

预设五种状态颜色，可以通过设置 color 为 success、 processing、error、default、warning 来代表不同的状态。

TypeScript
JavaScript
import React from 'react';
import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  MinusCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { Divider, Space, Tag } from 'antd';

const App: React.FC = () => (
  <>
    <Divider orientation="left">Without icon</Divider>
    <Space size={[0, 8]} wrap>
      <Tag color="success">success</Tag>
      <Tag color="processing">processing</Tag>
      <Tag color="error">error</Tag>
      <Tag color="warning">warning</Tag>
      <Tag color="default">default</Tag>
    </Space>
    <Divider orientation="left">With icon</Divider>
    <Space size={[0, 8]} wrap>
      <Tag icon={<CheckCircleOutlined />} color="success">
        success
      </Tag>
      <Tag icon={<SyncOutlined spin />} color="processing">
        processing
      </Tag>
      <Tag icon={<CloseCircleOutlined />} color="error">
        error
      </Tag>
      <Tag icon={<ExclamationCircleOutlined />} color="warning">
        warning
      </Tag>
      <Tag icon={<ClockCircleOutlined />} color="default">
        waiting
      </Tag>
      <Tag icon={<MinusCircleOutlined />} color="default">
        stop
      </Tag>
    </Space>
  </>
);

export default App;

Presets

magenta

red

volcano

orange

gold

lime

green

cyan

blue

geekblue

purple

Custom

#f50

#2db7f5

#87d068

#108ee9

多彩标签

我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

TypeScript
JavaScript
import React from 'react';
import { Divider, Space, Tag } from 'antd';

const App: React.FC = () => (
  <>
    <Divider orientation="left">Presets</Divider>
    <Space size={[0, 8]} wrap>
      <Tag color="magenta">magenta</Tag>
      <Tag color="red">red</Tag>
      <Tag color="volcano">volcano</Tag>
      <Tag color="orange">orange</Tag>
      <Tag color="gold">gold</Tag>
      <Tag color="lime">lime</Tag>
      <Tag color="green">green</Tag>
      <Tag color="cyan">cyan</Tag>
      <Tag color="blue">blue</Tag>
      <Tag color="geekblue">geekblue</Tag>
      <Tag color="purple">purple</Tag>
    </Space>
    <Divider orientation="left">Custom</Divider>
    <Space size={[0, 8]} wrap>
      <Tag color="#f50">#f50</Tag>
      <Tag color="#2db7f5">#2db7f5</Tag>
      <Tag color="#87d068">#87d068</Tag>
      <Tag color="#108ee9">#108ee9</Tag>
    </Space>
  </>
);

export default App;

Categories:

Movies

Books

Music

Sports

可选择标签

可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。

该组件为完全受控组件，不支持非受控用法。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Space, Tag } from 'antd';

const { CheckableTag } = Tag;

const tagsData = ['Movies', 'Books', 'Music', 'Sports'];

const App: React.FC = () => {
  const [selectedTags, setSelectedTags] = useState<string[]>(['Books']);

  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags);
  };

  return (
    <>
      <span style={{ marginRight: 8 }}>Categories:</span>
      <Space size={[0, 8]} wrap>
        {tagsData.map((tag) => (
          <CheckableTag
            key={tag}
            checked={selectedTags.includes(tag)}
            onChange={(checked) => handleChange(tag, checked)}
          >
            {tag}
          </CheckableTag>
        ))}
      </Space>
    </>
  );
};

export default App;

Twitter

Youtube

Facebook

图标按钮

当需要在 Tag 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Tag 内使用 Icon 组件。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

TypeScript
JavaScript
import React from 'react';
import {
  FacebookOutlined,
  LinkedinOutlined,
  TwitterOutlined,
  YoutubeOutlined,
} from '@ant-design/icons';
import { Space, Tag } from 'antd';

const App: React.FC = () => (
  <Space size={[0, 8]} wrap>
    <Tag icon={<TwitterOutlined />} color="#55acee">
      Twitter
    </Tag>
    <Tag icon={<YoutubeOutlined />} color="#cd201f">
      Youtube
    </Tag>
    <Tag icon={<FacebookOutlined />} color="#3b5999">
      Facebook
    </Tag>
    <Tag icon={<LinkedinOutlined />} color="#55acee">
      LinkedIn
    </Tag>
  </Space>
);

export default App;

API

Tag

参数	说明	类型	默认值	版本
closable	标签是否可以关闭（点击默认关闭）	boolean	false
closeIcon	自定义关闭按钮	ReactNode	-	4.4.0
color	标签色	string	-
icon	设置图标	ReactNode	-
onClose	关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为）	(e) => void	-

Tag.CheckableTag

参数	说明	类型	默认值
checked	设置标签的选中状态	boolean	false
onChange	点击标签时触发的回调	(checked) => void	-

import React from 'react'; import { Space, Tag } from 'antd'; const log = (e: React.MouseEvent<HTMLElement>) => { console.log(e); }; const preventDefault = (e: React.MouseEvent<HTMLElement>) => { e.preventDefault(); console.log('Clicked! But prevent default.'); }; const App: React.FC = () => ( <Space size={[0, 8]} wrap> <Tag>Tag 1</Tag> <Tag> <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a> </Tag> <Tag closable onClose={log}> Tag 2 </Tag> <Tag closable onClose={preventDefault}> Prevent Default </Tag> </Space> ); export default App;

import React, { useEffect, useRef, useState } from 'react'; import { PlusOutlined } from '@ant-design/icons'; import type { InputRef } from 'antd'; import { Space, Input, Tag, Tooltip, theme } from 'antd'; const App: React.FC = () => { const { token } = theme.useToken(); const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']); const [inputVisible, setInputVisible] = useState(false); const [inputValue, setInputValue] = useState(''); const [editInputIndex, setEditInputIndex] = useState(-1); const [editInputValue, setEditInputValue] = useState(''); const inputRef = useRef<InputRef>(null); const editInputRef = useRef<InputRef>(null); useEffect(() => { if (inputVisible) { inputRef.current?.focus(); } }, [inputVisible]); useEffect(() => { editInputRef.current?.focus(); }, [inputValue]); const handleClose = (removedTag: string) => { const newTags = tags.filter((tag) => tag !== removedTag); console.log(newTags); setTags(newTags); }; const showInput = () => { setInputVisible(true); }; const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setInputValue(e.target.value); }; const handleInputConfirm = () => { if (inputValue && tags.indexOf(inputValue) === -1) { setTags([...tags, inputValue]); } setInputVisible(false); setInputValue(''); }; const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setEditInputValue(e.target.value); }; const handleEditInputConfirm = () => { const newTags = [...tags]; newTags[editInputIndex] = editInputValue; setTags(newTags); setEditInputIndex(-1); setInputValue(''); }; const tagInputStyle: React.CSSProperties = { width: 78, verticalAlign: 'top', }; const tagPlusStyle: React.CSSProperties = { background: token.colorBgContainer, borderStyle: 'dashed', }; return ( <Space size={[0, 8]} wrap> <Space size={[0, 8]} wrap> {tags.map((tag, index) => { if (editInputIndex === index) { return ( <Input ref={editInputRef} key={tag} size="small" style={tagInputStyle} value={editInputValue} onChange={handleEditInputChange} onBlur={handleEditInputConfirm} onPressEnter={handleEditInputConfirm} /> ); } const isLongTag = tag.length > 20; const tagElem = ( <Tag key={tag} closable={index !== 0} style={{ userSelect: 'none' }} onClose={() => handleClose(tag)} > <span onDoubleClick={(e) => { if (index !== 0) { setEditInputIndex(index); setEditInputValue(tag); e.preventDefault(); } }} > {isLongTag ? `${tag.slice(0, 20)}...` : tag} </span> </Tag> ); return isLongTag ? ( <Tooltip title={tag} key={tag}> {tagElem} </Tooltip> ) : ( tagElem ); })} </Space> {inputVisible ? ( <Input ref={inputRef} type="text" size="small" style={tagInputStyle} value={inputValue} onChange={handleInputChange} onBlur={handleInputConfirm} onPressEnter={handleInputConfirm} /> ) : ( <Tag style={tagPlusStyle} onClick={showInput}> <PlusOutlined /> New Tag </Tag> )} </Space> ); }; export default App;

import React, { useEffect, useRef, useState } from 'react'; import { PlusOutlined } from '@ant-design/icons'; import type { InputRef } from 'antd'; import { Input, Tag, theme } from 'antd'; import { TweenOneGroup } from 'rc-tween-one'; const App: React.FC = () => { const { token } = theme.useToken(); const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']); const [inputVisible, setInputVisible] = useState(false); const [inputValue, setInputValue] = useState(''); const inputRef = useRef<InputRef>(null); useEffect(() => { if (inputVisible) { inputRef.current?.focus(); } }, [inputVisible]); const handleClose = (removedTag: string) => { const newTags = tags.filter((tag) => tag !== removedTag); console.log(newTags); setTags(newTags); }; const showInput = () => { setInputVisible(true); }; const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setInputValue(e.target.value); }; const handleInputConfirm = () => { if (inputValue && tags.indexOf(inputValue) === -1) { setTags([...tags, inputValue]); } setInputVisible(false); setInputValue(''); }; const forMap = (tag: string) => { const tagElem = ( <Tag closable onClose={(e) => { e.preventDefault(); handleClose(tag); }} > {tag} </Tag> ); return ( <span key={tag} style={{ display: 'inline-block' }}> {tagElem} </span> ); }; const tagChild = tags.map(forMap); const tagPlusStyle = { background: token.colorBgContainer, borderStyle: 'dashed', }; return ( <> <div style={{ marginBottom: 16 }}> <TweenOneGroup enter={{ scale: 0.8, opacity: 0, type: 'from', duration: 100, }} onEnd={(e) => { if (e.type === 'appear' || e.type === 'enter') { (e.target as any).style = 'display: inline-block'; } }} leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }} appear={false} > {tagChild} </TweenOneGroup> </div> {inputVisible ? ( <Input ref={inputRef} type="text" size="small" style={{ width: 78 }} value={inputValue} onChange={handleInputChange} onBlur={handleInputConfirm} onPressEnter={handleInputConfirm} /> ) : ( <Tag onClick={showInput} style={tagPlusStyle}> <PlusOutlined /> New Tag </Tag> )} </> ); }; export default App;

import React from 'react'; import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, MinusCircleOutlined, SyncOutlined, } from '@ant-design/icons'; import { Divider, Space, Tag } from 'antd'; const App: React.FC = () => ( <> <Divider orientation="left">Without icon</Divider> <Space size={[0, 8]} wrap> <Tag color="success">success</Tag> <Tag color="processing">processing</Tag> <Tag color="error">error</Tag> <Tag color="warning">warning</Tag> <Tag color="default">default</Tag> </Space> <Divider orientation="left">With icon</Divider> <Space size={[0, 8]} wrap> <Tag icon={<CheckCircleOutlined />} color="success"> success </Tag> <Tag icon={<SyncOutlined spin />} color="processing"> processing </Tag> <Tag icon={<CloseCircleOutlined />} color="error"> error </Tag> <Tag icon={<ExclamationCircleOutlined />} color="warning"> warning </Tag> <Tag icon={<ClockCircleOutlined />} color="default"> waiting </Tag> <Tag icon={<MinusCircleOutlined />} color="default"> stop </Tag> </Space> </> ); export default App;

import React from 'react'; import { Divider, Space, Tag } from 'antd'; const App: React.FC = () => ( <> <Divider orientation="left">Presets</Divider> <Space size={[0, 8]} wrap> <Tag color="magenta">magenta</Tag> <Tag color="red">red</Tag> <Tag color="volcano">volcano</Tag> <Tag color="orange">orange</Tag> <Tag color="gold">gold</Tag> <Tag color="lime">lime</Tag> <Tag color="green">green</Tag> <Tag color="cyan">cyan</Tag> <Tag color="blue">blue</Tag> <Tag color="geekblue">geekblue</Tag> <Tag color="purple">purple</Tag> </Space> <Divider orientation="left">Custom</Divider> <Space size={[0, 8]} wrap> <Tag color="#f50">#f50</Tag> <Tag color="#2db7f5">#2db7f5</Tag> <Tag color="#87d068">#87d068</Tag> <Tag color="#108ee9">#108ee9</Tag> </Space> </> ); export default App;

import React, { useState } from 'react'; import { Space, Tag } from 'antd'; const { CheckableTag } = Tag; const tagsData = ['Movies', 'Books', 'Music', 'Sports']; const App: React.FC = () => { const [selectedTags, setSelectedTags] = useState<string[]>(['Books']); const handleChange = (tag: string, checked: boolean) => { const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter((t) => t !== tag); console.log('You are interested in: ', nextSelectedTags); setSelectedTags(nextSelectedTags); }; return ( <> <span style={{ marginRight: 8 }}>Categories:</span> <Space size={[0, 8]} wrap> {tagsData.map((tag) => ( <CheckableTag key={tag} checked={selectedTags.includes(tag)} onChange={(checked) => handleChange(tag, checked)} > {tag} </CheckableTag> ))} </Space> </> ); }; export default App;

import React from 'react'; import { FacebookOutlined, LinkedinOutlined, TwitterOutlined, YoutubeOutlined, } from '@ant-design/icons'; import { Space, Tag } from 'antd'; const App: React.FC = () => ( <Space size={[0, 8]} wrap> <Tag icon={<TwitterOutlined />} color="#55acee"> Twitter </Tag> <Tag icon={<YoutubeOutlined />} color="#cd201f"> Youtube </Tag> <Tag icon={<FacebookOutlined />} color="#3b5999"> Facebook </Tag> <Tag icon={<LinkedinOutlined />} color="#55acee"> LinkedIn </Tag> </Space> ); export default App;

API

Tag

参数	说明	类型	默认值	版本
closable	标签是否可以关闭（点击默认关闭）	boolean	false
closeIcon	自定义关闭按钮	ReactNode	-	4.4.0
color	标签色	string	-
icon	设置图标	ReactNode	-
onClose	关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为）	(e) => void	-

Tag.CheckableTag

参数	说明	类型	默认值
checked	设置标签的选中状态	boolean	false
onChange	点击标签时触发的回调	(checked) => void	-

Ant Design

Tag标签

Ant Design

Tag标签

何时使用

代码演示

API

Tag

Tag.CheckableTag

何时使用

代码演示

API

Tag

Tag.CheckableTag