mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
Add tag control demo
This commit is contained in:
parent
5719a83f36
commit
a75dfe8fd6
50
components/tag/demo/control.md
Normal file
50
components/tag/demo/control.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
# 数据生成标签
|
||||||
|
|
||||||
|
- order: 2
|
||||||
|
|
||||||
|
用数组生成一组标签。
|
||||||
|
|
||||||
|
> 使用 `afterClose` 而不是 `onClose`,删除时有动画效果。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
import { Tag, Button } from 'antd';
|
||||||
|
|
||||||
|
let index = 2;
|
||||||
|
const App = React.createClass({
|
||||||
|
getInitialState() {
|
||||||
|
return {
|
||||||
|
tags: [
|
||||||
|
{ key: 1, name: '标签一'},
|
||||||
|
{ key: 2, name: '标签二'},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
handleClose(key) {
|
||||||
|
const tags = [...this.state.tags].filter(tag => (tag.key !== key) && tag);
|
||||||
|
console.log(tags);
|
||||||
|
this.setState({ tags });
|
||||||
|
},
|
||||||
|
addTag() {
|
||||||
|
const tags = [...this.state.tags];
|
||||||
|
index += 1;
|
||||||
|
tags.push({ key: index, name: '新标签' + index });
|
||||||
|
this.setState({ tags });
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{this.state.tags.map(tag =>
|
||||||
|
<Tag key={tag.key} closable afterClose={this.handleClose.bind(this, tag.key)}>{tag.name}</Tag>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<Button onClick={this.addTag}>添加标签</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
````
|
@ -24,11 +24,14 @@ class AntTag extends React.Component {
|
|||||||
this.props.onClose(e);
|
this.props.onClose(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
animationEnd() {
|
animationEnd(key, existed) {
|
||||||
this.setState({
|
if (!existed) {
|
||||||
closed: true,
|
this.setState({
|
||||||
closing: false,
|
closed: true,
|
||||||
});
|
closing: false,
|
||||||
|
});
|
||||||
|
this.props.afterClose();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -56,6 +59,7 @@ AntTag.defaultProps = {
|
|||||||
prefixCls: 'ant-tag',
|
prefixCls: 'ant-tag',
|
||||||
closable: false,
|
closable: false,
|
||||||
onClose() {},
|
onClose() {},
|
||||||
|
afterClose() {},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AntTag;
|
export default AntTag;
|
||||||
|
@ -18,5 +18,6 @@
|
|||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|----------------|--------------------------------|------------|---------|--------|
|
|----------------|--------------------------------|------------|---------|--------|
|
||||||
| closable | 标签是否可以关闭 | boolean | | false |
|
| closable | 标签是否可以关闭 | boolean | | false |
|
||||||
| onClose | 组合时根据此项判定checked | function | | 无 |
|
| onClose | 关闭时的回调 | function | | 无 |
|
||||||
|
| afterClose | 动画关闭后的回调 | function | | 无 |
|
||||||
| color | 标签的色彩 | string | blue green yellow red | 无 |
|
| color | 标签的色彩 | string | blue green yellow red | 无 |
|
||||||
|
Loading…
Reference in New Issue
Block a user