From e8ec073adc4f35053804de1a35e38c3a77996854 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BE=BD=E8=88=AA?= Date: Thu, 25 Jun 2015 16:01:04 +0800 Subject: [PATCH] add steps --- components/step/demo/basic.md | 5 -- components/step/index.jsx | 4 - components/steps/demo/custom-icon.md | 9 +++ components/steps/demo/simple.md | 46 +++++++++++ components/steps/demo/small-size.md | 9 +++ components/steps/demo/step-next.md | 8 ++ components/steps/index.jsx | 3 + components/{step => steps}/index.md | 4 +- index.js | 3 +- package.json | 3 +- style/components/index.less | 1 + style/components/steps.less | 109 +++++++++++++++++++++++---- 12 files changed, 176 insertions(+), 28 deletions(-) delete mode 100644 components/step/demo/basic.md delete mode 100644 components/step/index.jsx create mode 100644 components/steps/demo/custom-icon.md create mode 100644 components/steps/demo/simple.md create mode 100644 components/steps/demo/small-size.md create mode 100644 components/steps/demo/step-next.md create mode 100644 components/steps/index.jsx rename components/{step => steps}/index.md (91%) diff --git a/components/step/demo/basic.md b/components/step/demo/basic.md deleted file mode 100644 index b280b57122..0000000000 --- a/components/step/demo/basic.md +++ /dev/null @@ -1,5 +0,0 @@ -# Steps 基本用法 - -````jsx - -```` \ No newline at end of file diff --git a/components/step/index.jsx b/components/step/index.jsx deleted file mode 100644 index eb45ce9d59..0000000000 --- a/components/step/index.jsx +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -var React = require('react'); -var Steps = require('rc-steps'); diff --git a/components/steps/demo/custom-icon.md b/components/steps/demo/custom-icon.md new file mode 100644 index 0000000000..572bbed9f6 --- /dev/null +++ b/components/steps/demo/custom-icon.md @@ -0,0 +1,9 @@ +# Steps 自定义图标步进条 + +- order: 2 + +通过设置`Steps.Step`的`icon`属性，可以启用自定义图标。 + +````jsx + +```` \ No newline at end of file diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md new file mode 100644 index 0000000000..4b8404efa3 --- /dev/null +++ b/components/steps/demo/simple.md @@ -0,0 +1,46 @@ +# Steps 基本用法 + +- order: 0 + +简单的步进条 + +--- + +````jsx +'use strict'; + +var Steps = antd.Steps; + +var container = document.getElementById('components-steps-demo-simple'); + + +var steps = [{ + status: 'finish', + title: '已完成', + description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶' +}, { + status: 'process', + title: '进行中', + description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶' +}, { + status: 'wait', + title: '待运行', + description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶' +}, { + status: 'wait', + title: '待运行', + description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶' +}].map(function(s, i) { + return ( + ); + }); + +React.render( + + {steps} + , container); +```` \ No newline at end of file diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md new file mode 100644 index 0000000000..a31ee3bbe6 --- /dev/null +++ b/components/steps/demo/small-size.md @@ -0,0 +1,9 @@ +# Steps 迷你版步进条 + +- order: 1 + +迷你版的步进条，通过设置``启用 + +````jsx + +```` \ No newline at end of file diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md new file mode 100644 index 0000000000..5d3ca59cda --- /dev/null +++ b/components/steps/demo/step-next.md @@ -0,0 +1,8 @@ +# Steps 如何控制切换到下一步 + +- order: 3 + + +````jsx + +```` \ No newline at end of file diff --git a/components/steps/index.jsx b/components/steps/index.jsx new file mode 100644 index 0000000000..64361e183f --- /dev/null +++ b/components/steps/index.jsx @@ -0,0 +1,3 @@ +'use strict'; + +module.exports = require('rc-steps'); diff --git a/components/step/index.md b/components/steps/index.md similarity index 91% rename from components/step/index.md rename to components/steps/index.md index f3a4ba8327..17861866c9 100644 --- a/components/step/index.md +++ b/components/steps/index.md @@ -1,7 +1,7 @@ -# Step +# Steps - category: Components -- chinese: 步骤条 +- chinese: 步进条 - order: 8 --- diff --git a/index.js b/index.js index 1a38864a26..eb9e6f97ab 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,8 @@ var antd = { Progress: require('./components/progress'), Popover: require('./components/popover'), Select: require('./components/select'), - confirm: require('./components/modal/confirm') + confirm: require('./components/modal/confirm'), + Steps: require('./components/steps') }; module.exports = window.antd = antd; diff --git a/package.json b/package.json index a1691f8ebf..73932e75be 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "rc-progress": "~1.0.0", "rc-select": "~4.0.0", "rc-tabs": "~5.1.0", - "rc-tooltip": "~2.1.1" + "rc-tooltip": "~2.1.1", + "rc-steps": "~1.0.1" }, "devDependencies": { "babel-core": "~5.4.7", diff --git a/style/components/index.less b/style/components/index.less index d8328d3f0a..f92e210bc3 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -11,3 +11,4 @@ @import "form"; @import "loading"; @import "progress"; +@import "steps"; \ No newline at end of file diff --git a/style/components/steps.less b/style/components/steps.less index f2b2f7b6d6..e0c8b708b8 100644 --- a/style/components/steps.less +++ b/style/components/steps.less @@ -1,8 +1,16 @@ @active-color: #3fc7fa; @wait-color: #e9e9e9; +.transition(@transition) { + -webkit-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + .rc-steps { font-size: 0; + width: 100%; + line-height: 1.5; .rc-steps-item { position: relative; @@ -10,26 +18,47 @@ &.rc-steps-status-wait { .rc-steps-head { - color: @wait-color; border-color: @wait-color; + background-color: #fff; + &.rc-steps-custom { + background: none; + border: 0; + } + > .rc-steps-icon { + color: @wait-color; + } } } &.rc-steps-status-process { .rc-steps-head { - color: #fff; border-color: @active-color; - background: @active-color; + background-color: @active-color; + &.rc-steps-custom { + background: none; + border: 0; + } + > .rc-steps-icon { + color: #fff; + } } } &.rc-steps-status-finish { .rc-steps-head { - color: #fff; border-color: @active-color; - background: #fff; - > i { + background-color: #fff; + &.rc-steps-custom { + background: none; + border: 0; + } + > .rc-steps-icon { color: @active-color; } } + //.rc-steps-tail { + // > i { + // background: @active-color; + // } + //} } } @@ -37,6 +66,7 @@ .rc-steps-head, .rc-steps-main, .rc-steps-tail { display: inline-block; vertical-align: top; + } .rc-steps-head { border:2px solid @wait-color; @@ -45,20 +75,21 @@ line-height: 24px; text-align: center; border-radius: 24px; - font-size: 15px; + font-size: 13px; margin-right: 12px; - > i { - font-weight: bold; + .transition(background-color 0.1s ease); + .transition(border-color 0.1s ease); + + > .rc-steps-icon { + display: inline-block; + vertical-align: inherit; color: #3fc7fa; - vertical-align: middle; position: relative; - top: -2px; } } .rc-steps-main { max-width: 75px; - margin-top: 4px; - + margin-top: 3px; } .rc-steps-title { font-size: 14px; @@ -73,11 +104,11 @@ .rc-steps-tail { width: 0; position: relative; - top: 10px; + top: 13px; padding:0 10px; > i { display: inline-block; - background: #e9e9e9; + background: @wait-color; height: 2px; border-radius: 1px; width: 100%; @@ -85,4 +116,52 @@ } + &.rc-steps-small { + .rc-steps-head { + border:1px solid @wait-color; + width: 18px; + height: 18px; + line-height: 18px; + text-align: center; + border-radius: 18px; + font-size: 10px; + margin-right: 10px; + + > .rc-steps-icon { + top: 0; + } + } + .rc-steps-main { + max-width: 75px; + margin-top: 0; + } + .rc-steps-title { + font-size: 12px; + margin-bottom: 4px; + color: #666; + font-weight: bold; + } + .rc-steps-description { + font-size: 10px; + color: #999; + } + .rc-steps-tail { + top: 9px; + padding:0 8px; + > i { + height: 1px; + border-radius: 1px; + width: 100%; + } + } + } + + &.rc-steps-small .rc-steps-head.rc-steps-custom, .rc-steps-head.rc-steps-custom { + width: inherit; + height: inherit; + line-height: inherit; + border-radius: 0; + border: 0; + background: none; + } } \ No newline at end of file