Merge pull request #225 from zhujun24/vertical-steps

Vertical steps

components/steps/demo/vertical-small.md

+# 竖直方向的小型步骤条
+
+- 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 (<Step
+    key={i}
+    status={s.status}
+    title={s.title}
+    description={s.description}></Step>
+  );
+});
+
+React.render(<Steps size='small' direction='vertical'>{steps}</Steps>, container);
+````

components/steps/demo/vertical.md

+# 竖直方向的步骤条
+
+- 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 (<Step
+    key={i}
+    status={s.status}
+    title={s.title}
+    description={s.description}></Step>
+  );
+});
+
+React.render(<Steps direction='vertical'>{steps}</Steps>, container);
+````

components/steps/index.jsx

@@ -12,6 +12,7 @@ const AntSteps = React.createClass({
   },
   render() {
     return (<Steps size={this.props.size}
+                   direction={this.props.direction}
                    iconPrefix={this.props.iconPrefix}
                    maxDescriptionWidth={this.props.maxDescriptionWidth}
                    prefixCls={this.props.prefixCls}>
@@ -21,4 +22,4 @@ const AntSteps = React.createClass({
 });
 AntSteps.Step = Steps.Step;
 
-export default AntSteps;
+export default AntSteps;
\ No newline at end of file

components/steps/index.md

@@ -30,6 +30,7 @@
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
 |  size | 可选参数，指定大小（目前只支持普通和迷你两种大小）。 | string    |  small, default | default    |
+|  direction | 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。 | string    |  vertical |  无   |
 |  maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
 
 ### Steps.Step

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",

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