Tag标签

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

何时使用

  • 用于标记事物的属性和维度。

  • 进行分类。

代码演示

Tag标签 - 图1

基本

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

  1. import { Tag } from 'antd';
  3. function log(e) {
  4.   console.log(e);
  5. }
  7. function preventDefault(e) {
  8.   e.preventDefault();
  9.   console.log('Clicked! But prevent default.');
  10. }
  12. ReactDOM.render(
  13.   <>
  14.     <Tag>Tag 1</Tag>
  15.     <Tag>
  16.       <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
  17.     </Tag>
  18.     <Tag closable onClose={log}>
  19.       Tag 2
  20.     </Tag>
  21.     <Tag closable onClose={preventDefault}>
  22.       Prevent Default
  23.     </Tag>
  24.   </>,
  25.   mountNode,
  26. );

Tag标签 - 图2

动态添加和删除

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

  1. import { Tag, Input, Tooltip } from 'antd';
  2. import { PlusOutlined } from '@ant-design/icons';
  4. class EditableTagGroup extends React.Component {
  5.   state = {
  6.     tags: ['Unremovable', 'Tag 2', 'Tag 3'],
  7.     inputVisible: false,
  8.     inputValue: '',
  9.     editInputIndex: -1,
  10.     editInputValue: '',
  11.   };
  13.   handleClose = removedTag => {
  14.     const tags = this.state.tags.filter(tag => tag !== removedTag);
  15.     console.log(tags);
  16.     this.setState({ tags });
  17.   };
  19.   showInput = () => {
  20.     this.setState({ inputVisible: true }, () => this.input.focus());
  21.   };
  23.   handleInputChange = e => {
  24.     this.setState({ inputValue: e.target.value });
  25.   };
  27.   handleInputConfirm = () => {
  28.     const { inputValue } = this.state;
  29.     let { tags } = this.state;
  30.     if (inputValue && tags.indexOf(inputValue) === -1) {
  31.       tags = [...tags, inputValue];
  32.     }
  33.     console.log(tags);
  34.     this.setState({
  35.       tags,
  36.       inputVisible: false,
  37.       inputValue: '',
  38.     });
  39.   };
  41.   handleEditInputChange = e => {
  42.     this.setState({ editInputValue: e.target.value });
  43.   };
  45.   handleEditInputConfirm = () => {
  46.     this.setState(({ tags, editInputIndex, editInputValue }) => {
  47.       const newTags = [...tags];
  48.       newTags[editInputIndex] = editInputValue;
  50.       return {
  51.         tags: newTags,
  52.         editInputIndex: -1,
  53.         editInputValue: '',
  54.       };
  55.     });
  56.   };
  58.   saveInputRef = input => {
  59.     this.input = input;
  60.   };
  62.   saveEditInputRef = input => {
  63.     this.editInput = input;
  64.   };
  66.   render() {
  67.     const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
  68.     return (
  69.       <>
  70.         {tags.map((tag, index) => {
  71.           if (editInputIndex === index) {
  72.             return (
  73.               <Input
  74.                 ref={this.saveEditInputRef}
  75.                 key={tag}
  76.                 size="small"
  77.                 className="tag-input"
  78.                 value={editInputValue}
  79.                 onChange={this.handleEditInputChange}
  80.                 onBlur={this.handleEditInputConfirm}
  81.                 onPressEnter={this.handleEditInputConfirm}
  82.               />
  83.             );
  84.           }
  86.           const isLongTag = tag.length > 20;
  88.           const tagElem = (
  89.             <Tag
  90.               className="edit-tag"
  91.               key={tag}
  92.               closable={index !== 0}
  93.               onClose={() => this.handleClose(tag)}
  94.             >
  95.               <span
  96.                 onDoubleClick={e => {
  97.                   if (index !== 0) {
  98.                     this.setState({ editInputIndex: index, editInputValue: tag }, () => {
  99.                       this.editInput.focus();
  100.                     });
  101.                     e.preventDefault();
  102.                   }
  103.                 }}
  104.               >
  105.                 {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  106.               </span>
  107.             </Tag>
  108.           );
  109.           return isLongTag ? (
  110.             <Tooltip title={tag} key={tag}>
  111.               {tagElem}
  112.             </Tooltip>
  113.           ) : (
  114.             tagElem
  115.           );
  116.         })}
  117.         {inputVisible && (
  118.           <Input
  119.             ref={this.saveInputRef}
  120.             type="text"
  121.             size="small"
  122.             className="tag-input"
  123.             value={inputValue}
  124.             onChange={this.handleInputChange}
  125.             onBlur={this.handleInputConfirm}
  126.             onPressEnter={this.handleInputConfirm}
  127.           />
  128.         )}
  129.         {!inputVisible && (
  130.           <Tag className="site-tag-plus" onClick={this.showInput}>
  131.             <PlusOutlined /> New Tag
  132.           </Tag>
  133.         )}
  134.       </>
  135.     );
  136.   }
  137. }
  139. ReactDOM.render(<EditableTagGroup />, mountNode);
  1. .site-tag-plus {
  2.   background: #fff;
  3.   border-style: dashed;
  4. }
  5. .edit-tag {
  6.   user-select: none;
  7. }
  8. .tag-input {
  9.   width: 78px;
  10.   margin-right: 8px;
  11.   vertical-align: top;
  12. }

Tag标签 - 图3

控制关闭状态

通过 visible 属性控制关闭状态。

  1. import { Tag, Button } from 'antd';
  3. class Demo extends React.Component {
  4.   state = {
  5.     visible: true,
  6.   };
  8.   render() {
  9.     return (
  10.       <>
  11.         <Tag
  12.           closable
  13.           visible={this.state.visible}
  14.           onClose={() => this.setState({ visible: false })}
  15.         >
  16.           Movies
  17.         </Tag>
  18.         <br />
  19.         <Button size="small" onClick={() => this.setState({ visible: !this.state.visible })}>
  20.           Toggle
  21.         </Button>
  22.       </>
  23.     );
  24.   }
  25. }
  27. ReactDOM.render(<Demo />, mountNode);

Tag标签 - 图4

图标按钮

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

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

  1. import { Tag } from 'antd';
  2. import {
  3.   TwitterOutlined,
  4.   YoutubeOutlined,
  5.   FacebookOutlined,
  6.   LinkedinOutlined,
  7. } from '@ant-design/icons';
  9. ReactDOM.render(
  10.   <>
  11.     <Tag icon={<TwitterOutlined />} color="#55acee">
  12.       Twitter
  13.     </Tag>
  14.     <Tag icon={<YoutubeOutlined />} color="#cd201f">
  15.       Youtube
  16.     </Tag>
  17.     <Tag icon={<FacebookOutlined />} color="#3b5999">
  18.       Facebook
  19.     </Tag>
  20.     <Tag icon={<LinkedinOutlined />} color="#55acee">
  21.       LinkedIn
  22.     </Tag>
  23.   </>,
  24.   mountNode,
  25. );

Tag标签 - 图5

多彩标签

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

  1. import { Tag, Divider } from 'antd';
  3. ReactDOM.render(
  4.   <>
  5.     <Divider orientation="left">Presets</Divider>
  6.     <div>
  7.       <Tag color="magenta">magenta</Tag>
  8.       <Tag color="red">red</Tag>
  9.       <Tag color="volcano">volcano</Tag>
  10.       <Tag color="orange">orange</Tag>
  11.       <Tag color="gold">gold</Tag>
  12.       <Tag color="lime">lime</Tag>
  13.       <Tag color="green">green</Tag>
  14.       <Tag color="cyan">cyan</Tag>
  15.       <Tag color="blue">blue</Tag>
  16.       <Tag color="geekblue">geekblue</Tag>
  17.       <Tag color="purple">purple</Tag>
  18.     </div>
  19.     <Divider orientation="left">Custom</Divider>
  20.     <div>
  21.       <Tag color="#f50">#f50</Tag>
  22.       <Tag color="#2db7f5">#2db7f5</Tag>
  23.       <Tag color="#87d068">#87d068</Tag>
  24.       <Tag color="#108ee9">#108ee9</Tag>
  25.     </div>
  26.   </>,
  27.   mountNode,
  28. );

Tag标签 - 图6

可选择标签

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

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

  1. import { Tag } from 'antd';
  3. const { CheckableTag } = Tag;
  5. const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
  7. class HotTags extends React.Component {
  8.   state = {
  9.     selectedTags: ['Books'],
  10.   };
  12.   handleChange(tag, checked) {
  13.     const { selectedTags } = this.state;
  14.     const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
  15.     console.log('You are interested in: ', nextSelectedTags);
  16.     this.setState({ selectedTags: nextSelectedTags });
  17.   }
  19.   render() {
  20.     const { selectedTags } = this.state;
  21.     return (
  22.       <>
  23.         <span style={{ marginRight: 8 }}>Categories:</span>
  24.         {tagsData.map(tag => (
  25.           <CheckableTag
  26.             key={tag}
  27.             checked={selectedTags.indexOf(tag) > -1}
  28.             onChange={checked => this.handleChange(tag, checked)}
  29.           >
  30.             {tag}
  31.           </CheckableTag>
  32.         ))}
  33.       </>
  34.     );
  35.   }
  36. }
  38. ReactDOM.render(<HotTags />, mountNode);

Tag标签 - 图7

添加动画

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

  1. import { Tag, Input } from 'antd';
  2. import { TweenOneGroup } from 'rc-tween-one';
  3. import { PlusOutlined } from '@ant-design/icons';
  5. class EditableTagGroup extends React.Component {
  6.   state = {
  7.     tags: ['Tag 1', 'Tag 2', 'Tag 3'],
  8.     inputVisible: false,
  9.     inputValue: '',
  10.   };
  12.   handleClose = removedTag => {
  13.     const tags = this.state.tags.filter(tag => tag !== removedTag);
  14.     console.log(tags);
  15.     this.setState({ tags });
  16.   };
  18.   showInput = () => {
  19.     this.setState({ inputVisible: true }, () => this.input.focus());
  20.   };
  22.   handleInputChange = e => {
  23.     this.setState({ inputValue: e.target.value });
  24.   };
  26.   handleInputConfirm = () => {
  27.     const { inputValue } = this.state;
  28.     let { tags } = this.state;
  29.     if (inputValue && tags.indexOf(inputValue) === -1) {
  30.       tags = [...tags, inputValue];
  31.     }
  32.     console.log(tags);
  33.     this.setState({
  34.       tags,
  35.       inputVisible: false,
  36.       inputValue: '',
  37.     });
  38.   };
  40.   saveInputRef = input => {
  41.     this.input = input;
  42.   };
  44.   forMap = tag => {
  45.     const tagElem = (
  46.       <Tag
  47.         closable
  48.         onClose={e => {
  49.           e.preventDefault();
  50.           this.handleClose(tag);
  51.         }}
  52.       >
  53.         {tag}
  54.       </Tag>
  55.     );
  56.     return (
  57.       <span key={tag} style={{ display: 'inline-block' }}>
  58.         {tagElem}
  59.       </span>
  60.     );
  61.   };
  63.   render() {
  64.     const { tags, inputVisible, inputValue } = this.state;
  65.     const tagChild = tags.map(this.forMap);
  66.     return (
  67.       <>
  68.         <div style={{ marginBottom: 16 }}>
  69.           <TweenOneGroup
  70.             enter={{
  71.               scale: 0.8,
  72.               opacity: 0,
  73.               type: 'from',
  74.               duration: 100,
  75.               onComplete: e => {
  76.                 e.target.style = '';
  77.               },
  78.             }}
  79.             leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
  80.             appear={false}
  81.           >
  82.             {tagChild}
  83.           </TweenOneGroup>
  84.         </div>
  85.         {inputVisible && (
  86.           <Input
  87.             ref={this.saveInputRef}
  88.             type="text"
  89.             size="small"
  90.             style={{ width: 78 }}
  91.             value={inputValue}
  92.             onChange={this.handleInputChange}
  93.             onBlur={this.handleInputConfirm}
  94.             onPressEnter={this.handleInputConfirm}
  95.           />
  96.         )}
  97.         {!inputVisible && (
  98.           <Tag onClick={this.showInput} className="site-tag-plus">
  99.             <PlusOutlined /> New Tag
  100.           </Tag>
  101.         )}
  102.       </>
  103.     );
  104.   }
  105. }
  107. ReactDOM.render(<EditableTagGroup />, mountNode);
  1. .site-tag-plus {
  2.   background: #fff;
  3.   border-style: dashed;
  4. }

Tag标签 - 图8

预设状态的标签

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

  1. import { Tag, Divider } from 'antd';
  2. import {
  3.   CheckCircleOutlined,
  4.   SyncOutlined,
  5.   CloseCircleOutlined,
  6.   ExclamationCircleOutlined,
  7.   ClockCircleOutlined,
  8.   MinusCircleOutlined,
  9. } from '@ant-design/icons';
  11. ReactDOM.render(
  12.   <>
  13.     <Divider orientation="left">Without icon</Divider>
  14.     <div>
  15.       <Tag color="success">success</Tag>
  16.       <Tag color="processing">processing</Tag>
  17.       <Tag color="error">error</Tag>
  18.       <Tag color="warning">warning</Tag>
  19.       <Tag color="default">default</Tag>
  20.     </div>
  21.     <Divider orientation="left">With icon</Divider>
  22.     <div>
  23.       <Tag icon={<CheckCircleOutlined />} color="success">
  24.         success
  25.       </Tag>
  26.       <Tag icon={<SyncOutlined spin />} color="processing">
  27.         processing
  28.       </Tag>
  29.       <Tag icon={<CloseCircleOutlined />} color="error">
  30.         error
  31.       </Tag>
  32.       <Tag icon={<ExclamationCircleOutlined />} color="warning">
  33.         warning
  34.       </Tag>
  35.       <Tag icon={<ClockCircleOutlined />} color="default">
  36.         waiting
  37.       </Tag>
  38.       <Tag icon={<MinusCircleOutlined />} color="default">
  39.         stop
  40.       </Tag>
  41.     </div>
  42.   </>,
  43.   mountNode,
  44. );

API

Tag

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

Tag.CheckableTag

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