Tag 标签
进行标记和分类的小标签。
何时使用
- 用于标记事物的属性和维度。
- 进行分类。
代码演示
基本
基本标签的用法,可以通过添加 closable
变为可关闭标签。可关闭标签具有 onClose
afterClose
两个事件。
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
function log(e) {
console.log(e);
}
function preventDefault(e) {
e.preventDefault();
console.log('Clicked! But prevent default.');
}
ReactDOM.render(
<div>
<Tag>Tag 1</Tag>
<Tag>
<a href="https://github.com/choerodon/choerodon-ui">Link</a>
</Tag>
<Tag closable onClose={log}>
Tag 2
</Tag>
<Tag closable onClose={preventDefault}>
Prevent Default
</Tag>
</div>,
document.getElementById('container'),
);
多彩标签
我们添加了多种预设色彩的标签样式,用作不同场景使用。如果预设值不能满足你的需求,可以设置为具体的色值。
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
ReactDOM.render(
<div>
<h4 style={{ marginBottom: 16 }}>Presets:</h4>
<div>
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
<Tag color="orange">orange</Tag>
<Tag color="gold">gold</Tag>
<Tag color="lime">lime</Tag>
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
<Tag color="blue">blue</Tag>
<Tag color="geekblue">geekblue</Tag>
<Tag color="purple">purple</Tag>
</div>
<h4 style={{ margin: '16px 0' }}>Custom:</h4>
<div>
<Tag color="#f50">#f50</Tag>
<Tag color="#2db7f5">#2db7f5</Tag>
<Tag color="#87d068">#87d068</Tag>
<Tag color="#108ee9">#108ee9</Tag>
</div>
</div>,
document.getElementById('container'));
动态添加和删除
用数组生成一组标签,可以动态添加和删除,通过监听删除动画结束的事件 afterClose
实现。
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag, Input, Tooltip, Icon } from 'choerodon-ui';
class EditableTagGroup extends React.Component {
state = {
tags: ['Unremovable', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: '',
};
handleClose = (removedTag) => {
const tags = this.state.tags.filter(tag => tag !== removedTag);
console.log(tags);
this.setState({ tags });
}
showInput = () => {
this.setState({ inputVisible: true }, () => this.input.focus());
}
handleInputChange = (e) => {
this.setState({ inputValue: e.target.value });
}
handleInputConfirm = () => {
const state = this.state;
const inputValue = state.inputValue;
可选择
可通过 CheckableTag
实现类似 Checkbox 的效果,点击切换选中效果。
该组件为完全受控组件,不支持非受控用法。
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
const { CheckableTag } = Tag;
class MyTag extends React.Component {
state = { checked: true };
handleChange = checked => {
this.setState({ checked });
};
render() {
return (
<CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />
);
}
}
ReactDOM.render(
<div>
<MyTag>Tag1</MyTag>
<MyTag>Tag2</MyTag>
<MyTag>Tag3</MyTag>
</div>,
document.getElementById('container'),
);
热门标签
选择你感兴趣的话题。
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
const CheckableTag = Tag.CheckableTag;
const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
class HotTags extends React.Component {
state = {
selectedTags: [],
};
handleChange(tag, checked) {
const { selectedTags } = this.state;
const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
console.log('You are interested in: ', nextSelectedTags);
this.setState({ selectedTags: nextSelectedTags });
}
render() {
const { selectedTags } = this.state;
return (
<div>
<h6 style={{ marginRight: 8, display: 'inline' }}>Categories:</h6>
{tagsFromServer.map(tag => (
<CheckableTag
key={tag}
API
Tag
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
afterClose | 关闭动画完成后的回调 | () => void | - |
closable | 标签是否可以关闭 | boolean | false |
color | 标签色 | string | - |
onClose | 关闭时的回调 | (e) => void | - |
Tag.CheckableTag
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checked | 设置标签的选中状态 | boolean | false |
onChange | 点击标签时触发的回调 | (checked) => void | - |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .