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

Tag 标签 - 图3

热门标签

选择你感兴趣的话题。

  1. import { Tag } from 'antd';
  2. const CheckableTag = Tag.CheckableTag;
  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. <h6 style={{ marginRight: 8, display: 'inline' }}>Categories:</h6>
  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, Icon } from 'antd';
  2. import { TweenOneGroup } from 'rc-tween-one';
  3. class EditableTagGroup extends React.Component {
  4. state = {
  5. tags: ['Tag 1', '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. forMap = tag => {
  35. const tagElem = (
  36. <Tag
  37. closable
  38. onClose={e => {
  39. e.preventDefault();
  40. this.handleClose(tag);
  41. }}
  42. >
  43. {tag}
  44. </Tag>
  45. );
  46. return (
  47. <span key={tag} style={{ display: 'inline-block' }}>
  48. {tagElem}
  49. </span>
  50. );
  51. };
  52. render() {
  53. const { tags, inputVisible, inputValue } = this.state;
  54. const tagChild = tags.map(this.forMap);
  55. return (
  56. <div>
  57. <div style={{ marginBottom: 16 }}>
  58. <TweenOneGroup
  59. enter={{
  60. scale: 0.8,
  61. opacity: 0,
  62. type: 'from',
  63. duration: 100,
  64. onComplete: e => {
  65. e.target.style = '';
  66. },
  67. }}
  68. leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
  69. appear={false}
  70. >
  71. {tagChild}
  72. </TweenOneGroup>
  73. </div>
  74. {inputVisible && (
  75. <Input
  76. ref={this.saveInputRef}
  77. type="text"
  78. size="small"
  79. style={{ width: 78 }}
  80. value={inputValue}
  81. onChange={this.handleInputChange}
  82. onBlur={this.handleInputConfirm}
  83. onPressEnter={this.handleInputConfirm}
  84. />
  85. )}
  86. {!inputVisible && (
  87. <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
  88. <Icon type="plus" /> New Tag
  89. </Tag>
  90. )}
  91. </div>
  92. );
  93. }
  94. }
  95. ReactDOM.render(<EditableTagGroup />, mountNode);

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);

API

Tag

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

Tag.CheckableTag

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