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.   <div>
  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.   </div>,
  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 => (this.input = input);
  60.   saveEditInputRef = input => (this.editInput = input);
  62.   render() {
  63.     const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
  64.     return (
  65.       <div>
  66.         {tags.map((tag, index) => {
  67.           if (editInputIndex === index) {
  68.             return (
  69.               <Input
  70.                 ref={this.saveEditInputRef}
  71.                 key={tag}
  72.                 size="small"
  73.                 className="tag-input"
  74.                 value={editInputValue}
  75.                 onChange={this.handleEditInputChange}
  76.                 onBlur={this.handleEditInputConfirm}
  77.                 onPressEnter={this.handleEditInputConfirm}
  78.               />
  79.             );
  80.           }
  82.           const isLongTag = tag.length > 20;
  84.           const tagElem = (
  85.             <Tag
  86.               className="edit-tag"
  87.               key={tag}
  88.               closable={index !== 0}
  89.               onClose={() => this.handleClose(tag)}
  90.             >
  91.               <span
  92.                 onDoubleClick={e => {
  93.                   if (index !== 0) {
  94.                     this.setState({ editInputIndex: index, editInputValue: tag }, () => {
  95.                       this.editInput.focus();
  96.                     });
  97.                     e.preventDefault();
  98.                   }
  99.                 }}
  100.               >
  101.                 {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  102.               </span>
  103.             </Tag>
  104.           );
  105.           return isLongTag ? (
  106.             <Tooltip title={tag} key={tag}>
  107.               {tagElem}
  108.             </Tooltip>
  109.           ) : (
  110.             tagElem
  111.           );
  112.         })}
  113.         {inputVisible && (
  114.           <Input
  115.             ref={this.saveInputRef}
  116.             type="text"
  117.             size="small"
  118.             className="tag-input"
  119.             value={inputValue}
  120.             onChange={this.handleInputChange}
  121.             onBlur={this.handleInputConfirm}
  122.             onPressEnter={this.handleInputConfirm}
  123.           />
  124.         )}
  125.         {!inputVisible && (
  126.           <Tag className="site-tag-plus" onClick={this.showInput}>
  127.             <PlusOutlined /> New Tag
  128.           </Tag>
  129.         )}
  130.       </div>
  131.     );
  132.   }
  133. }
  135. 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.       <div>
  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.       </div>
  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.   <div>
  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.   </div>,
  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 => (this.input = input);
  42.   forMap = tag => {
  43.     const tagElem = (
  44.       <Tag
  45.         closable
  46.         onClose={e => {
  47.           e.preventDefault();
  48.           this.handleClose(tag);
  49.         }}
  50.       >
  51.         {tag}
  52.       </Tag>
  53.     );
  54.     return (
  55.       <span key={tag} style={{ display: 'inline-block' }}>
  56.         {tagElem}
  57.       </span>
  58.     );
  59.   };
  61.   render() {
  62.     const { tags, inputVisible, inputValue } = this.state;
  63.     const tagChild = tags.map(this.forMap);
  64.     return (
  65.       <div>
  66.         <div style={{ marginBottom: 16 }}>
  67.           <TweenOneGroup
  68.             enter={{
  69.               scale: 0.8,
  70.               opacity: 0,
  71.               type: 'from',
  72.               duration: 100,
  73.               onComplete: e => {
  74.                 e.target.style = '';
  75.               },
  76.             }}
  77.             leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
  78.             appear={false}
  79.           >
  80.             {tagChild}
  81.           </TweenOneGroup>
  82.         </div>
  83.         {inputVisible && (
  84.           <Input
  85.             ref={this.saveInputRef}
  86.             type="text"
  87.             size="small"
  88.             style={{ width: 78 }}
  89.             value={inputValue}
  90.             onChange={this.handleInputChange}
  91.             onBlur={this.handleInputConfirm}
  92.             onPressEnter={this.handleInputConfirm}
  93.           />
  94.         )}
  95.         {!inputVisible && (
  96.           <Tag onClick={this.showInput} className="site-tag-plus">
  97.             <PlusOutlined /> New Tag
  98.           </Tag>
  99.         )}
  100.       </div>
  101.     );
  102.   }
  103. }
  105. 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 } 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.     <div>
  14.       <h4>Without icon</h4>
  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>
  22.     <div>
  23.       <h4>With icon</h4>
  24.       <Tag icon={<CheckCircleOutlined />} color="success">
  25.         success
  26.       </Tag>
  27.       <Tag icon={<SyncOutlined spin />} color="processing">
  28.         processing
  29.       </Tag>
  30.       <Tag icon={<CloseCircleOutlined />} color="error">
  31.         error
  32.       </Tag>
  33.       <Tag icon={<ExclamationCircleOutlined />} color="warning">
  34.         warning
  35.       </Tag>
  36.       <Tag icon={<ClockCircleOutlined />} color="default">
  37.         waiting
  38.       </Tag>
  39.       <Tag icon={<MinusCircleOutlined />} color="default">
  40.         stop
  41.       </Tag>
  42.     </div>
  43.   </>,
  44.   mountNode,
  45. );

API

Tag

参数说明类型默认值
afterClose关闭动画完成后的回调，请使用 onClose, 我们将在下个版本删除此项() => void-
closable标签是否可以关闭booleanfalse
color标签色string-
onClose关闭时的回调(e) => void-
visible是否显示标签booleantrue
icon设置图标ReactNode-

Tag.CheckableTag

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