Tag
Tag for categorizing or markup.
When To Use#
It can be used to tag by dimension or property.
When categorizing.
Examples
import { Tag } from 'antd';
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/ant-design/ant-design/issues/1862">Link</a></Tag>
<Tag closable onClose={log}>Tag 2</Tag>
<Tag closable onClose={preventDefault}>Prevent Default</Tag>
</div>,
mountNode
);
Unremovable
Tag 2
Tag 3
New Tag
import { Tag, Input, Tooltip, Icon } from 'antd';
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;
let tags = state.tags;
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue];
}
console.log(tags);
this.setState({
tags,
inputVisible: false,
inputValue: '',
});
}
saveInputRef = input => this.input = input
render() {
const { tags, inputVisible, inputValue } = this.state;
return (
<div>
{tags.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
<Tag key={tag} closable={index !== 0} afterClose={() => this.handleClose(tag)}>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</Tag>
);
return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
})}
{inputVisible && (
<Input
ref={this.saveInputRef}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={this.handleInputChange}
onBlur={this.handleInputConfirm}
onPressEnter={this.handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
<Icon type="plus" /> New Tag
</Tag>
)}
</div>
);
}
}
ReactDOM.render(<EditableTagGroup />, mountNode);
Categories:
Movies
Books
Music
Sports
import { Tag } from 'antd';
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}
checked={selectedTags.indexOf(tag) > -1}
onChange={checked => this.handleChange(tag, checked)}
>
{tag}
</CheckableTag>
))}
</div>
);
}
}
ReactDOM.render(<HotTags />, mountNode);
Presets:
magenta
red
volcano
orange
gold
lime
green
cyan
blue
geekblue
purple
Custom:
#f50
#2db7f5
#87d068
#108ee9
import { Tag } from 'antd';
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>
, mountNode);
.ant-tag {
margin-bottom: 8px;
}
Tag1
Tag2
Tag3
import { Tag } from 'antd';
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>
, mountNode);
API#
Tag#
Property | Description | Type | Default |
---|---|---|---|
afterClose | Callback executed when close animation is completed | () => void | - |
closable | Whether Tag can be closed | boolean | false |
color | Color of the Tag | string | - |
onClose | Callback executed when tag is closed | (e) => void | - |
Tag.CheckableTag#
Property | Description | Type | Default |
---|---|---|---|
checked | Checked status of Tag | boolean | false |
onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |