From 943fbd3d3455797398e526d8ef8396fb58efa4e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BE=BD=E8=88=AA?= Date: Wed, 8 Jul 2015 15:53:51 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4steps=E7=9A=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/steps/demo/custom-icon.md | 35 -------------- components/steps/demo/icon.md | 19 ++++++++ components/steps/index.jsx | 4 +- package.json | 2 +- style/components/steps.less | 71 +++++++++++++++++++++------- 5 files changed, 77 insertions(+), 54 deletions(-) delete mode 100644 components/steps/demo/custom-icon.md create mode 100644 components/steps/demo/icon.md diff --git a/components/steps/demo/custom-icon.md b/components/steps/demo/custom-icon.md deleted file mode 100644 index ed80fcf33f..0000000000 --- a/components/steps/demo/custom-icon.md +++ /dev/null @@ -1,35 +0,0 @@ -# 自定义图标步骤条 - -- order: 2 - -通过设置`Steps.Step`的`icon`属性，可以启用自定义图标。 - ---- - - - -````jsx -var Steps = antd.Steps; -var Step = Steps.Step; -var container = document.getElementById('components-steps-demo-custom-icon'); - - -React.render( - }> - }> - }> -, container); -```` diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md new file mode 100644 index 0000000000..a7434d34e3 --- /dev/null +++ b/components/steps/demo/icon.md @@ -0,0 +1,19 @@ +# 带ICON图标的步骤条 + +- order: 2 + +通过设置`Steps.Step`的`icon`属性，可以启用自定义图标。 + +--- + +````jsx +var Steps = antd.Steps; +var Step = Steps.Step; +var container = document.getElementById('components-steps-demo-icon'); + +React.render( + + + +, container); +```` diff --git a/components/steps/index.jsx b/components/steps/index.jsx index a7d53494c4..a98ab853f5 100644 --- a/components/steps/index.jsx +++ b/components/steps/index.jsx @@ -7,13 +7,15 @@ var AntSteps = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-steps', + iconPrefix: 'ant', size: 'default', maxDescriptionWidth: 100 }; }, render() { return ( {this.props.children} ); diff --git a/package.json b/package.json index 0a72c141f1..dfbde25656 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "rc-menu": "~3.4.0", "rc-progress": "~1.0.0", "rc-select": "~4.0.0", - "rc-steps": "~1.1.2", + "rc-steps": "~1.1.3", "rc-tabs": "~5.1.0", "rc-tooltip": "~2.2.3" }, diff --git a/style/components/steps.less b/style/components/steps.less index 7f8d79554d..90c09c65fe 100644 --- a/style/components/steps.less +++ b/style/components/steps.less @@ -1,11 +1,23 @@ @import "../mixins/index"; @stepsPrefixClass: ~"@{css-prefix}steps"; -@active-color: #3fc7fa; -@wait-color: #e9e9e9; +@process-icon-color: #3fc7fa; +@process-title-color: #666; +@process-description-color: @process-title-color; +@process-tail-color: #bcbcbc; +@wait-icon-color: #bcbcbc; +@wait-title-color: #999; +@wait-description-color: @wait-title-color; +@wait-tail-color: @wait-icon-color; +@finish-icon-color: @process-icon-color; +@finish-title-color: @wait-title-color; +@finish-description-color: @finish-title-color; +@finish-tail-color: @process-icon-color; .transition(@transition) { transition: @transition; + -webkit-transition: @transition; + -moz-transition: @transition; } .@{stepsPrefixClass} { @@ -19,34 +31,56 @@ &.@{stepsPrefixClass}-status-wait { .@{stepsPrefixClass}-head-inner { - border-color: @wait-color; + border-color: @wait-icon-color; background-color: #fff; - > .@{stepsPrefixClass}-icon { - color: @wait-color; + color: @wait-icon-color; } } + .@{stepsPrefixClass}-title { + color: @wait-title-color; + } + .@{stepsPrefixClass}-description { + color: @wait-description-color; + } + .@{stepsPrefixClass}-tail > i { + background-color: @wait-tail-color; + } } &.@{stepsPrefixClass}-status-process { .@{stepsPrefixClass}-head-inner { - border-color: @active-color; - background-color: @active-color; - + border-color: @process-icon-color; + background-color: @process-icon-color; > .@{stepsPrefixClass}-icon { color: #fff; } } + .@{stepsPrefixClass}-title { + color: @process-title-color; + } + .@{stepsPrefixClass}-description { + color: @process-description-color; + } + .@{stepsPrefixClass}-tail > i { + background-color: @process-tail-color; + } } &.@{stepsPrefixClass}-status-finish { .@{stepsPrefixClass}-head-inner { - border-color: @active-color; + border-color: @finish-icon-color; background-color: #fff; > .@{stepsPrefixClass}-icon { - color: @active-color; + color: @finish-icon-color; } } .@{stepsPrefixClass}-tail > i { - background-color: @active-color; + background-color: @finish-tail-color; + } + .@{stepsPrefixClass}-title { + color: @finish-title-color; + } + .@{stepsPrefixClass}-description { + color: @finish-description-color; } } @@ -54,10 +88,13 @@ .@{stepsPrefixClass}-head-inner { background: none; border: 0; + font-size: 20px; + width: auto; + height: auto; } &.@{stepsPrefixClass}-status-process { - .@{stepsPrefixClass}-title { - color: @active-color; + .@{stepsPrefixClass}-head-inner > .@{stepsPrefixClass}-icon { + color: @process-icon-color; } } } @@ -75,14 +112,14 @@ .@{stepsPrefixClass}-head-inner { display: block; - border:2px solid @wait-color; + border:2px solid @wait-icon-color; width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: 24px; font-size: 14px; - margin-right: 12px; + margin-right: 8px; .transition(background-color 0.1s ease); .transition(border-color 0.1s ease); @@ -123,7 +160,7 @@ padding:0 10px; > i { display: inline-block; - background: @wait-color; + background: @wait-tail-color; height: 2px; border-radius: 1px; width: 100%; @@ -132,7 +169,7 @@ &.@{stepsPrefixClass}-small { .@{stepsPrefixClass}-head-inner { - border:1px solid @wait-color; + border:1px solid @wait-icon-color; width: 18px; height: 18px; line-height: 18px; -- GitLab