continue api position

This commit is contained in:
zhujun24 2015-09-07 15:13:59 +08:00
parent 68e44f3080
commit f3bbf778f8
3 changed files with 21 additions and 11 deletions

View File

@ -8,13 +8,13 @@
````jsx
let Timeline = antd.Timeline;
let container = document.getElementById('components-timeline-demo-end');
let container = document.getElementById('components-timeline-demo-continue');
React.render(
<Timeline>
<Timeline continue={true}>
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
<Timeline.Item end={true}>技术测试异常 2015-09-01</Timeline.Item>
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
</Timeline>
, container);
````

View File

@ -8,11 +8,13 @@ let Timeline = React.createClass({
},
render() {
let children = this.props.children;
let continuee = this.props.continue;
return (
<ul className={this.props.prefixCls}>
{React.Children.map(children, function (ele, idx) {
let np = {
timelineLast: idx === children.length - 1
timelineLast: idx === children.length - 1,
continuee: continuee
};
return React.cloneElement(ele, np);
}, this)}
@ -26,21 +28,22 @@ Timeline.Item = React.createClass({
return {
prefixCls: 'ant-timeline',
color: 'blue',
end: false
continuee: false
};
},
render() {
let props = this.props;
let prefixCls = props.prefixCls;
let color = props.color;
let end = props.end;
let endCls = end ? prefixCls + '-item-last' : '';
let last = end ? <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> : null;
let lastLineShow = (props.timelineLast && !end) ? 'none' : 'block';
let continuee = props.continuee;
let timelineLast = props.timelineLast;
let endCls = continuee && timelineLast ? prefixCls + '-item-last' : '';
let last = continuee && timelineLast ? <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> : null;
let lastTailShow = (timelineLast && !continuee) ? 'none' : 'block';
return (
<li className={prefixCls + '-item ' + endCls}>
<div style={{display:lastLineShow}} className={prefixCls + '-item-tail'}></div>
<div style={{display:lastTailShow}} className={prefixCls + '-item-tail'}></div>
<div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color}></div>
<div className={prefixCls + '-item-content'}>{props.children}</div>
{last}

View File

@ -24,6 +24,14 @@
</Timeline>
```
### Timeline
时间轴。
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| continue | 指定最后一个幽灵节点。 | boolean | 无 | false |
### Timeline.Item
时间轴的每一个节点。
@ -31,4 +39,3 @@
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| color | 指定圆圈颜色。 | string | blue, red, green | blue |
| end | 指定最后一个幽灵节点。 | boolean | 无 | false |