Tag标签
进行标记和分类的小标签。
何时使用#
用于标记事物的属性和维度。
进行分类。
代码演示
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
import { Tag, Input, Tooltip, Button } 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 && <Button size="small" type="dashed" onClick={this.showInput}>+ New Tag</Button>}
</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>
<strong style={{ marginRight: 8 }}>Categories:</strong>
{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:
pink
red
orange
green
cyan
blue
purple
Custom:
#f50
#2db7f5
#87d068
#108ee9
import { Tag } from 'antd';
ReactDOM.render(
<div>
<h4 style={{ marginBottom: 16 }}>Presets:</h4>
<div>
<Tag color="pink">pink</Tag>
<Tag color="red">red</Tag>
<Tag color="orange">orange</Tag>
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
<Tag color="blue">blue</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#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
afterClose | 关闭动画完成后的回调 | () => void | - |
closable | 标签是否可以关闭 | boolean | false |
color | 标签色 | string | - |
onClose | 关闭时的回调 | (e) => void | - |
Tag.CheckableTag#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checked | 设置标签的选中状态 | boolean | false |
onChange | 点击标签时触发的回调 | (checked) => void | - |