diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
new file mode 100644
index 0000000000..b8f6b9ca86
--- /dev/null
+++ b/components/timeline/demo/basic.md
@@ -0,0 +1,21 @@
+# 基本用法
+
+- order: 0
+
+基本的时间轴。
+
+---
+
+````jsx
+let Timeline = antd.Timeline;
+let 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
new file mode 100644
index 0000000000..3e271b68de
--- /dev/null
+++ b/components/timeline/demo/color.md
@@ -0,0 +1,20 @@
+# 圆圈颜色
+
+- order: 1
+
+圆圈颜色。
+
+---
+
+````jsx
+let Timeline = antd.Timeline;
+let 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/end.md b/components/timeline/demo/end.md
new file mode 100644
index 0000000000..45afa3d5d8
--- /dev/null
+++ b/components/timeline/demo/end.md
@@ -0,0 +1,20 @@
+# 最后一个
+
+- order: 2
+
+在最后位置添加一个幽灵节点。
+
+---
+
+````jsx
+let Timeline = antd.Timeline;
+let 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
new file mode 100644
index 0000000000..fc397733cb
--- /dev/null
+++ b/components/timeline/index.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+let Timeline = React.createClass({
+ getDefaultProps() {
+ return {
+ prefixCls: 'ant-timeline'
+ };
+ },
+ render() {
+ let children = this.props.children;
+ return (
+
+ {React.Children.map(children, function (ele, idx) {
+ let np = {
+ timelineLast: idx === children.length - 1
+ };
+ return React.cloneElement(ele, np);
+ }, this)}
+
+ );
+ }
+});
+
+Timeline.Item = React.createClass({
+ getDefaultProps() {
+ return {
+ prefixCls: 'ant-timeline',
+ color: 'blue',
+ 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 (
+
+
+
+ {props.children}
+ {last}
+
+ );
+ }
+});
+
+export default Timeline;
diff --git a/components/timeline/index.md b/components/timeline/index.md
new file mode 100644
index 0000000000..c91e74158c
--- /dev/null
+++ b/components/timeline/index.md
@@ -0,0 +1,34 @@
+# Timeline
+
+- category: Components
+- chinese: 时间轴
+- type: 展示
+
+---
+
+垂直展示的时间流信息。
+
+## 何时使用
+
+- 当有一系列信息需要从上至下按时间排列时；
+- 需要有一条时间轴进行视觉上的串联时；
+
+## 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..32e8e3abb0
--- /dev/null
+++ b/style/components/timeline.less
@@ -0,0 +1,52 @@
+@import "../mixins/index";
+
+@timeline-prefix-cls: ~"@{css-prefix}timeline";
+
+@timeline-color: #e9e9e9;
+
+.@{timeline-prefix-cls} {
+ &-item {
+ position: relative;
+ min-height: 50px;
+ padding-bottom: 12px;
+
+ &-tail {
+ position: absolute;
+ left: 5px;
+ z-index: 1;
+ height: 100%;
+ border-left: 2px solid @timeline-color;
+ &-end {
+ border-left: 2px dotted @timeline-color;
+ }
+ }
+
+ &-head {
+ position: absolute;
+ 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 @timeline-color;
+ }
+ }
+
+ &-content {
+ margin-left: 26px;
+ font-size: 12px;
+ }
+ }
+}