diff --git a/changelog.html b/changelog.html index ec1449d7d..8e78644b1 100644 --- a/changelog.html +++ b/changelog.html @@ -8,12 +8,12 @@ -null - Ant Design +CHANGELOG - Ant Design - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + 
let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-basic');
+
+React.render(
+<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+ +
+
+ 基本用法 +
+

基本的时间轴。

+ +
+ \ No newline at end of file diff --git a/components/timeline/demo/color.html b/components/timeline/demo/color.html new file mode 100644 index 000000000..cecc05f5c --- /dev/null +++ b/components/timeline/demo/color.html @@ -0,0 +1,45 @@ +
+
+
+ 
let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-color');
+
+React.render(
+<Timeline>
+  <Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item color="red">初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+
+
+
+ 圆圈颜色 +
+

圆圈颜色。

+ +
+
\ No newline at end of file diff --git a/components/timeline/demo/end.html b/components/timeline/demo/end.html new file mode 100644 index 000000000..a7407c3fd --- /dev/null +++ b/components/timeline/demo/end.html @@ -0,0 +1,45 @@ +
+
+
+ 
let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-end');
+
+React.render(
+<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item end={true}>技术测试异常 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+
+
+
+ 最后一个 +
+

在最后位置添加一个幽灵节点。

+ +
+
\ No newline at end of file diff --git a/components/timeline/index.html b/components/timeline/index.html new file mode 100644 index 000000000..6750c18af --- /dev/null +++ b/components/timeline/index.html @@ -0,0 +1,720 @@ + + + + + + + + + + +Timeline 时间轴 - Ant Design + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+

+ Timeline 时间轴 +

+

垂直展示的时间流信息。

+

何时使用

    +
  • 当有一系列信息需要从上至下按时间排列时；
    • +
  • 需要有一条时间轴进行视觉上的串联时；
    • +
+

API

<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+</Timeline>

Timeline.Item

时间轴的每一个节点。

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
参数说明类型可选值默认值
color指定圆圈颜色。stringblue, red, greenblue
end指定最后一个幽灵节点。boolean无false
+ +
+

+ 组件演示 + +

+
+
+
+
+ 
let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-basic');
+
+React.render(
+<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+
+
+
+ 基本用法 +
+

基本的时间轴。

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

在最后位置添加一个幽灵节点。

+ +
+
+
+
+
+
+ 
let Timeline = antd.Timeline;
+let container = document.getElementById('components-timeline-demo-color');
+
+React.render(
+<Timeline>
+  <Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item color="red">初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+</Timeline>
+, container);
+
+
+
+ 圆圈颜色 +
+

圆圈颜色。

+ +
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx new file mode 100644 index 000000000..fc397733c --- /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 ( + + ); + } +}); + +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/tooltip/index.html b/components/tooltip/index.html index f5dfadc71..b742198bc 100644 --- a/components/tooltip/index.html +++ b/components/tooltip/index.html @@ -13,7 +13,7 @@ Tooltip 文字提示 - Ant Design - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +