Tag 标签

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

何时使用

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

代码演示

基本

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

Tag标签 - 图1

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

多彩标签

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

Tag标签 - 图2

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

动态添加和删除

用数组生成一组标签,可以动态添加和删除,通过监听删除动画结束的事件 afterClose 实现。

Tag标签 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tag, Input, Tooltip, Icon } from 'choerodon-ui';
  4. class EditableTagGroup extends React.Component {
  5. state = {
  6. tags: ['Unremovable', '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 state = this.state;
  23. const inputValue = state.inputValue;

可选择

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

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

Tag标签 - 图4

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

热门标签

选择你感兴趣的话题。

Tag标签 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tag } from 'choerodon-ui';
  4. const CheckableTag = Tag.CheckableTag;
  5. const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
  6. class HotTags extends React.Component {
  7. state = {
  8. selectedTags: [],
  9. };
  10. handleChange(tag, checked) {
  11. const { selectedTags } = this.state;
  12. const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
  13. console.log('You are interested in: ', nextSelectedTags);
  14. this.setState({ selectedTags: nextSelectedTags });
  15. }
  16. render() {
  17. const { selectedTags } = this.state;
  18. return (
  19. <div>
  20. <h6 style={{ marginRight: 8, display: 'inline' }}>Categories:</h6>
  21. {tagsFromServer.map(tag => (
  22. <CheckableTag
  23. key={tag}

API

Tag

参数说明类型默认值
afterClose关闭动画完成后的回调() => void-
closable标签是否可以关闭booleanfalse
color标签色string-
onClose关闭时的回调(e) => void-

Tag.CheckableTag

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