diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
new file mode 100644
index 0000000000000000000000000000000000000000..866e49224e490ec3b9d15b24d509b1163225d6e9
--- /dev/null
+++ b/components/steps/demo/vertical-small.md
@@ -0,0 +1,36 @@
+# 竖直方向的小型步骤条
+
+- order: 5
+
+简单的竖直方向的小型步骤条。
+
+---
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-vertical-small');
+
+var steps = [{
+ status: 'finish',
+ title: '已完成',
+ description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'
+}, {
+ status: 'process',
+ title: '进行中',
+ description: '描述啊描述啊描述啊描述啊描述啊描述啊'
+}, {
+ status: 'wait',
+ title: '待运行',
+ description: '描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊'
+}].map(function(s, i) {
+ return (
+ );
+});
+
+React.render({steps}, container);
+````
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
new file mode 100644
index 0000000000000000000000000000000000000000..94e7a4a44c21fa17c93205c652ce85fe0ddfad40
--- /dev/null
+++ b/components/steps/demo/vertical.md
@@ -0,0 +1,40 @@
+# 竖直方向的步骤条
+
+- order: 4
+
+简单的竖直方向的步骤条。
+
+---
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-vertical');
+
+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);
+````
diff --git a/components/steps/index.jsx b/components/steps/index.jsx
index 823fe66e5935c089248c61ce20e7c9cc35d4f85c..ecbae78b553d413cbf38f24da2a048658aa149d2 100644
--- a/components/steps/index.jsx
+++ b/components/steps/index.jsx
@@ -12,6 +12,7 @@ const AntSteps = React.createClass({
},
render() {
return (
@@ -21,4 +22,4 @@ const AntSteps = React.createClass({
});
AntSteps.Step = Steps.Step;
-export default AntSteps;
+export default AntSteps;
\ No newline at end of file
diff --git a/components/steps/index.md b/components/steps/index.md
index 7e7c592a839305f222ff12d823d4d1e067a0b081..d6b70e0f34d00639fad3e21c445396a60714aec9 100644
--- a/components/steps/index.md
+++ b/components/steps/index.md
@@ -30,6 +30,7 @@
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| size | 可选参数，指定大小（目前只支持普通和迷你两种大小）。 | string | small, default | default |
+| direction | 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。 | string | vertical | 无 |
| maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
### Steps.Step
diff --git a/package.json b/package.json
index cf736880184c7ef8cd168a92ae8743f556944ab9..cacecee05166687e45650f335639757750926a35 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
"rc-radio": "~2.0.0",
"rc-select": "~4.8.5",
"rc-slider": "~1.4.0",
- "rc-steps": "~1.1.4",
+ "rc-steps": "~1.2.1",
"rc-switch": "~1.2.0",
"rc-table": "~3.1.0",
"rc-tabs": "~5.3.2",
diff --git a/style/components/steps.less b/style/components/steps.less
index 4849633435618adfc3ef8f0d80d70252fbd81380..0baa2c00e3e4bfbc7bc086872ac458d68a0c8e04 100644
--- a/style/components/steps.less
+++ b/style/components/steps.less
@@ -117,7 +117,7 @@
.@{steps-prefix-cls}-head-inner {
display: block;
- border:1px solid @wait-icon-color;
+ border: 1px solid @wait-icon-color;
width: 26px;
height: 26px;
line-height: 26px;
@@ -167,7 +167,7 @@
left: 0;
width: 100%;
top: 13px;
- padding:0 10px;
+ padding: 0 10px;
> i {
display: inline-block;
vertical-align: top;
@@ -181,7 +181,7 @@
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-head-inner {
- border:1px solid @wait-icon-color;
+ border: 1px solid @wait-icon-color;
width: 18px;
height: 18px;
line-height: 18px;
@@ -209,7 +209,7 @@
}
.@{steps-prefix-cls}-tail {
top: 8px;
- padding:0 8px;
+ padding: 0 8px;
> i {
height: 1px;
border-radius: 1px;
@@ -227,3 +227,131 @@
background: none;
}
}
+
+.@{steps-prefix-cls}-vertical {
+ .@{steps-prefix-cls}-item {
+ display: block;
+ }
+
+ .@{steps-prefix-cls}-tail {
+ position: absolute;
+ left: 13px;
+ top: 0;
+ height: 100%;
+ width: 1px;
+ padding: 30px 0 4px 0;
+ > i {
+ height: 100%;
+ width: 1px;
+ }
+ }
+
+ .@{steps-prefix-cls}-head {
+ float: left;
+ &-inner {
+ margin-right: 16px;
+ }
+ }
+
+ .@{steps-prefix-cls}-main {
+ max-width: 100%;
+ min-height: 47px;
+ overflow: hidden;
+ display: block;
+ .@{steps-prefix-cls}-title {
+ line-height: 26px;
+ }
+ .@{steps-prefix-cls}-description {
+ padding-bottom: 12px;
+ }
+ }
+}
+
+.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-small {
+ .@{steps-prefix-cls}-item {
+ display: block;
+ }
+
+ .@{steps-prefix-cls}-tail {
+ position: absolute;
+ left: 6px;
+ top: 0;
+ height: 100%;
+ width: 2px;
+ padding: 0;
+ > i {
+ height: 100%;
+ width: 0px;
+ }
+ }
+
+ .@{steps-prefix-cls}-status-wait {
+ .@{steps-prefix-cls}-tail {
+ > i {
+ background-color: #fff;
+ border-left: 2px dotted @wait-tail-color;
+ }
+ }
+ }
+
+ .@{steps-prefix-cls}-status-process {
+ .@{steps-prefix-cls}-tail {
+ > i {
+ background-color: #fff;
+ border-left: 2px dotted @process-tail-color;
+ }
+ }
+ }
+
+ .@{steps-prefix-cls}-status-finish {
+ .@{steps-prefix-cls}-tail {
+ > i {
+ background-color: #fff;
+ border-left: 2px solid @finish-tail-color;
+ }
+ }
+ }
+
+ .@{steps-prefix-cls}-main {
+ max-width: 100%;
+ min-height: 47px;
+ overflow: hidden;
+ display: block;
+ .@{steps-prefix-cls}-title {
+ line-height: 14px;
+ }
+ .@{steps-prefix-cls}-description {
+ padding-bottom: 12px;
+ }
+ }
+
+ .@{steps-prefix-cls}-status-wait, .@{steps-prefix-cls}-status-process {
+ overflow: hidden;
+ .@{steps-prefix-cls}-head-inner {
+ text-indent: 10000px;
+ display: inline-block;
+ background-color: #fff;
+ }
+ }
+
+ .@{steps-prefix-cls}-head-inner {
+ width: 14px;
+ height: 14px;
+ margin-right: 8px;
+ background-color: #2db7f5;
+ border-width: 2px;
+ }
+
+ .@{steps-prefix-cls}-status-finish {
+ .@{steps-prefix-cls}-head-inner {
+ background-color: @finish-tail-color;
+ .@{steps-prefix-cls}-icon:before {
+ color: #fff;
+ font-weight: 700;
+ position: absolute;
+ top: -15px;
+ left: -6px;
+ }
+ }
+ }
+}
\ No newline at end of file