diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
index e69de29bb2..4f2b0d8a27 100644
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@@ -0,0 +1,21 @@
+# 基本用法
+
+- order: 0
+
+基本的时间轴。
+
+---
+
+````jsx
+var Timeline = antd.Timeline;
+var Item = Timeline.Item;
+var container = document.getElementById('components-timeline-demo-basic');
+
+React.render(
+ 创建服务现场 2015-09-01
+ 初步排除网络异常 2015-09-01
+ 技术测试异常 2015-09-01
+ 网络异常正在修复 2015-09-01
+
+, container);
+````
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index e69de29bb2..24542c8cda 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -0,0 +1,20 @@
+# 圆圈颜色
+
+- order: 1
+
+圆圈颜色。
+
+---
+
+````jsx
+var Timeline = antd.Timeline;
+var Item = Timeline.Item;
+var container = document.getElementById('components-timeline-demo-color');
+
+React.render(
+ 创建服务现场 2015-09-01
+ 初步排除网络异常 2015-09-01
+ 技术测试异常 2015-09-01
+
+, container);
+````
diff --git a/components/timeline/demo/dashed.md b/components/timeline/demo/dashed.md
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/components/timeline/demo/end.md b/components/timeline/demo/end.md
new file mode 100644
index 0000000000..30843243bc
--- /dev/null
+++ b/components/timeline/demo/end.md
@@ -0,0 +1,20 @@
+# 最后一个
+
+- order: 2
+
+在最后位置添加一个幽灵节点。
+
+---
+
+````jsx
+var Timeline = antd.Timeline;
+var Item = Timeline.Item;
+var container = document.getElementById('components-timeline-demo-end');
+
+React.render(
+ 创建服务现场 2015-09-01
+ 初步排除网络异常 2015-09-01
+ 技术测试异常 2015-09-01
+
+, container);
+````
diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx
index eafa022e3d..6f82767127 100644
--- a/components/timeline/index.jsx
+++ b/components/timeline/index.jsx
@@ -1,35 +1,52 @@
import React from 'react';
-let AntTimeline = React.createClass({
+let Timeline = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-timeline'
};
},
render() {
+ let children = this.props.children;
return (
- {this.props.children}
+ {React.Children.map(children, function (ele, idx) {
+ let np = {
+ timelineLast: idx === children.length - 1
+ };
+ return React.cloneElement(ele, np);
+ }, this)}
);
}
});
-AntTimeline.Item = React.createClass({
+Timeline.Item = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-timeline',
color: 'blue',
- dashed: false
+ end: false
};
},
render() {
+ let props = this.props;
+ let prefixCls = props.prefixCls;
+ let color = props.color;
+ let end = props.end;
+ let endCls = end ? prefixCls + '-item-tail-end' : '';
+ let last = end ? : null;
+ let lastLineShow = (props.timelineLast && !end) ? 'none' : 'block';
+
return (
-
- {this.props.children}
+
+
+
+ {props.children}
+ {last}
);
}
});
-export default AntTimeline;
+export default Timeline;
diff --git a/components/timeline/index.md b/components/timeline/index.md
index bfe1aeca70..c91e74158c 100644
--- a/components/timeline/index.md
+++ b/components/timeline/index.md
@@ -12,3 +12,23 @@
- 当有一系列信息需要从上至下按时间排列时；
- 需要有一条时间轴进行视觉上的串联时；
+
+## API
+
+```jsx
+
+ 创建服务现场 2015-09-01
+ 初步排除网络异常 2015-09-01
+ 技术测试异常 2015-09-01
+ 网络异常正在修复 2015-09-01
+
+```
+
+### Timeline.Item
+
+时间轴的每一个节点。
+
+| 参数 | 说明 | 类型 | 可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+| color | 指定圆圈颜色。 | string | blue, red, green | blue |
+| end | 指定最后一个幽灵节点。 | boolean | 无 | false |
diff --git a/index.js b/index.js
index dbae9fb45e..1a48880b96 100644
--- a/index.js
+++ b/index.js
@@ -42,7 +42,8 @@ const antd = {
Tree: require('./components/tree'),
Upload: require('./components/upload'),
Badge: require('./components/badge'),
- Menu: require('./components/menu')
+ Menu: require('./components/menu'),
+ Timeline: require('./components/timeline')
};
module.exports = antd;
diff --git a/style/components/index.less b/style/components/index.less
index 12d0b7e02d..56e01b1cbb 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -33,3 +33,4 @@
@import "menu";
@import "affix";
@import "badge";
+@import "timeline";
diff --git a/style/components/timeline.less b/style/components/timeline.less
new file mode 100644
index 0000000000..f1f6bcd438
--- /dev/null
+++ b/style/components/timeline.less
@@ -0,0 +1,54 @@
+@import "../mixins/index";
+
+@timeline-prefix-cls: ~"@{css-prefix}timeline";
+
+@line-color: #e9e9e9;
+
+.@{timeline-prefix-cls} {
+ &-item {
+ position: relative;
+ min-height: 50px;
+
+ &-tail {
+ position: absolute;
+ left: 5px;
+ z-index: 1;
+ height: 100%;
+ border-left: 2px solid @line-color;
+ &-end {
+ border-left: 2px dotted @line-color;
+ }
+ }
+
+ &-head {
+ position: relative;
+ z-index: 2;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ border-radius: 6px;
+ &-blue {
+ border: 2px solid @primary-color;
+ }
+ &-red {
+ border: 2px solid @error-color;
+ }
+ &-green {
+ border: 2px solid @success-color;
+ }
+ &-end{
+ position: absolute;
+ bottom: -12px;
+ border: 2px solid @line-color;
+ }
+ }
+
+ &-content {
+ position: relative;
+ top: -14px;
+ margin-left: 26px;
+ padding-bottom: 4px;
+ font-size: 12px;
+ }
+ }
+}