Tag标签

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

何时使用

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

  • 进行分类。

代码演示

Tag标签 - 图1

基本

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

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

Tag标签 - 图2

动态添加和删除

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

  1. import { Tag, Input, Tooltip } from 'antd';
  2. import { PlusOutlined } from '@ant-design/icons';
  3. class EditableTagGroup extends React.Component {
  4. state = {
  5. tags: ['Unremovable', 'Tag 2', 'Tag 3'],
  6. inputVisible: false,
  7. inputValue: '',
  8. };
  9. handleClose = removedTag => {
  10. const tags = this.state.tags.filter(tag => tag !== removedTag);
  11. console.log(tags);
  12. this.setState({ tags });
  13. };
  14. showInput = () => {
  15. this.setState({ inputVisible: true }, () => this.input.focus());
  16. };
  17. handleInputChange = e => {
  18. this.setState({ inputValue: e.target.value });
  19. };
  20. handleInputConfirm = () => {
  21. const { inputValue } = this.state;
  22. let { tags } = this.state;
  23. if (inputValue && tags.indexOf(inputValue) === -1) {
  24. tags = [...tags, inputValue];
  25. }
  26. console.log(tags);
  27. this.setState({
  28. tags,
  29. inputVisible: false,
  30. inputValue: '',
  31. });
  32. };
  33. saveInputRef = input => (this.input = input);
  34. render() {
  35. const { tags, inputVisible, inputValue } = this.state;
  36. return (
  37. <div>
  38. {tags.map((tag, index) => {
  39. const isLongTag = tag.length > 20;
  40. const tagElem = (
  41. <Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
  42. {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  43. </Tag>
  44. );
  45. return isLongTag ? (
  46. <Tooltip title={tag} key={tag}>
  47. {tagElem}
  48. </Tooltip>
  49. ) : (
  50. tagElem
  51. );
  52. })}
  53. {inputVisible && (
  54. <Input
  55. ref={this.saveInputRef}
  56. type="text"
  57. size="small"
  58. style={{ width: 78 }}
  59. value={inputValue}
  60. onChange={this.handleInputChange}
  61. onBlur={this.handleInputConfirm}
  62. onPressEnter={this.handleInputConfirm}
  63. />
  64. )}
  65. {!inputVisible && (
  66. <Tag className="site-tag-plus" onClick={this.showInput}>
  67. <PlusOutlined /> New Tag
  68. </Tag>
  69. )}
  70. </div>
  71. );
  72. }
  73. }
  74. ReactDOM.render(<EditableTagGroup />, mountNode);
  1. .site-tag-plus {
  2. background: #fff;
  3. border-style: dashed;
  4. }

Tag标签 - 图3

热门标签

选择你感兴趣的话题。

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

Tag标签 - 图4

添加动画

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

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

Tag标签 - 图5

多彩标签

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

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

Tag标签 - 图6

可选择

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

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

  1. import { Tag } from 'antd';
  2. const { CheckableTag } = Tag;
  3. class MyTag extends React.Component {
  4. state = { checked: true };
  5. handleChange = checked => {
  6. this.setState({ checked });
  7. };
  8. render() {
  9. return (
  10. <CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />
  11. );
  12. }
  13. }
  14. ReactDOM.render(
  15. <div>
  16. <MyTag>Tag1</MyTag>
  17. <MyTag>Tag2</MyTag>
  18. <MyTag>Tag3</MyTag>
  19. </div>,
  20. mountNode,
  21. );

Tag标签 - 图7

控制关闭状态

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

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

Tag标签 - 图8

预设状态的标签

预设五种状态颜色,可以通过设置 colorsuccessprocessingerrordefaultwarning 来代表不同的状态。

  1. import { Tag } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Tag color="success">success</Tag>
  5. <Tag color="processing">processing</Tag>
  6. <Tag color="error">error</Tag>
  7. <Tag color="default">default</Tag>
  8. <Tag color="warning">warning</Tag>
  9. </div>,
  10. mountNode,
  11. );

API

Tag

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

Tag.CheckableTag

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