From c5be535a3e28ac4255284172ad753ae5b32a247b Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Sep 2015 11:47:12 +0800 Subject: [PATCH 1/3] Add timeline component --- components/timeline/demo/basic.md | 0 components/timeline/demo/color.md | 0 components/timeline/demo/dashed.md | 0 components/timeline/index.jsx | 35 ++++++++++++++++++++++++++++++ components/timeline/index.md | 14 ++++++++++++ 5 files changed, 49 insertions(+) create mode 100644 components/timeline/demo/basic.md create mode 100644 components/timeline/demo/color.md create mode 100644 components/timeline/demo/dashed.md create mode 100644 components/timeline/index.jsx create mode 100644 components/timeline/index.md diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/timeline/demo/dashed.md b/components/timeline/demo/dashed.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx new file mode 100644 index 0000000000..eafa022e3d --- /dev/null +++ b/components/timeline/index.jsx @@ -0,0 +1,35 @@ +import React from 'react'; + +let AntTimeline = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-timeline' + }; + }, + render() { + return ( + + ); + } +}); + +AntTimeline.Item = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-timeline', + color: 'blue', + dashed: false + }; + }, + render() { + return ( +
  • + {this.props.children} +
    • + ); + } +}); + +export default AntTimeline; diff --git a/components/timeline/index.md b/components/timeline/index.md new file mode 100644 index 0000000000..bfe1aeca70 --- /dev/null +++ b/components/timeline/index.md @@ -0,0 +1,14 @@ +# Timeline + +- category: Components +- chinese: 时间轴 +- type: 展示 + +--- + +垂直展示的时间流信息。 + +## 何时使用 + +- 当有一系列信息需要从上至下按时间排列时； +- 需要有一条时间轴进行视觉上的串联时； From 018a62886d3e148dda212593d13ad0b62aad6a46 Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Tue, 1 Sep 2015 21:15:31 +0800 Subject: [PATCH 2/3] add timeline --- components/timeline/demo/basic.md | 21 ++++++++++++ components/timeline/demo/color.md | 20 +++++++++++ components/timeline/demo/dashed.md | 0 components/timeline/demo/end.md | 20 +++++++++++ components/timeline/index.jsx | 31 +++++++++++++---- components/timeline/index.md | 20 +++++++++++ index.js | 3 +- style/components/index.less | 1 + style/components/timeline.less | 54 ++++++++++++++++++++++++++++++ 9 files changed, 162 insertions(+), 8 deletions(-) delete mode 100644 components/timeline/demo/dashed.md create mode 100644 components/timeline/demo/end.md create mode 100644 style/components/timeline.less 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 ( ); } }); -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; + } + } +} From 082104a2aec711d94af5de95193ce06b7862f509 Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Tue, 1 Sep 2015 21:39:29 +0800 Subject: [PATCH 3/3] optimize code --- components/timeline/demo/basic.md | 18 +++++++++--------- components/timeline/demo/color.md | 16 ++++++++-------- components/timeline/demo/end.md | 16 ++++++++-------- components/timeline/index.jsx | 6 +++--- style/components/timeline.less | 14 ++++++-------- 5 files changed, 34 insertions(+), 36 deletions(-) diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md index 4f2b0d8a27..b8f6b9ca86 100644 --- a/components/timeline/demo/basic.md +++ b/components/timeline/demo/basic.md @@ -7,15 +7,15 @@ --- ````jsx -var Timeline = antd.Timeline; -var Item = Timeline.Item; -var container = document.getElementById('components-timeline-demo-basic'); +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 - +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 24542c8cda..3e271b68de 100644 --- a/components/timeline/demo/color.md +++ b/components/timeline/demo/color.md @@ -7,14 +7,14 @@ --- ````jsx -var Timeline = antd.Timeline; -var Item = Timeline.Item; -var container = document.getElementById('components-timeline-demo-color'); +let Timeline = antd.Timeline; +let container = document.getElementById('components-timeline-demo-color'); -React.render( - 创建服务现场 2015-09-01 - 初步排除网络异常 2015-09-01 - 技术测试异常 2015-09-01 - +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 index 30843243bc..45afa3d5d8 100644 --- a/components/timeline/demo/end.md +++ b/components/timeline/demo/end.md @@ -7,14 +7,14 @@ --- ````jsx -var Timeline = antd.Timeline; -var Item = Timeline.Item; -var container = document.getElementById('components-timeline-demo-end'); +let Timeline = antd.Timeline; +let container = document.getElementById('components-timeline-demo-end'); -React.render( - 创建服务现场 2015-09-01 - 初步排除网络异常 2015-09-01 - 技术测试异常 2015-09-01 - +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 6f82767127..fc397733cb 100644 --- a/components/timeline/index.jsx +++ b/components/timeline/index.jsx @@ -35,13 +35,13 @@ Timeline.Item = React.createClass({ let color = props.color; let end = props.end; let endCls = end ? prefixCls + '-item-tail-end' : ''; - let last = end ?
    : null; + let last = end ?
    : null; let lastLineShow = (props.timelineLast && !end) ? 'none' : 'block'; - + return (
  • -
    +
    {props.children}
    {last}
    • diff --git a/style/components/timeline.less b/style/components/timeline.less index f1f6bcd438..32e8e3abb0 100644 --- a/style/components/timeline.less +++ b/style/components/timeline.less @@ -2,26 +2,27 @@ @timeline-prefix-cls: ~"@{css-prefix}timeline"; -@line-color: #e9e9e9; +@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 @line-color; + border-left: 2px solid @timeline-color; &-end { - border-left: 2px dotted @line-color; + border-left: 2px dotted @timeline-color; } } &-head { - position: relative; + position: absolute; z-index: 2; width: 12px; height: 12px; @@ -39,15 +40,12 @@ &-end{ position: absolute; bottom: -12px; - border: 2px solid @line-color; + border: 2px solid @timeline-color; } } &-content { - position: relative; - top: -14px; margin-left: 26px; - padding-bottom: 4px; font-size: 12px; } }