add demos

components/steps/demo/custom-icon.md

@@ -4,6 +4,39 @@
 
 通过设置`Steps.Step`的`icon`属性，可以启用自定义图标。
 
+---
+
+````css
+.my-step-icon {
+  width: 35px;
+  height: 35px;
+  font-size: 35px;
+  line-height: 1;
+  position: relative;
+  top: -9px;
+}
+
+.my-step-icon > img {
+  width: 45px;
+  height: 45px;
+}
+````
+
 ````jsx
+'use strict';
+
+var Steps = antd.Steps;
+
+var container = document.getElementById('components-steps-demo-custom-icon');
+
+var imgIcon = <div className='my-step-icon'><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/></div>
+
+
+React.render(
+  <Steps>
+    <Steps.Step status='finish' title='步骤1' icon={<div className='my-step-icon'><span className='anticon anticon-cloud'></span></div>}></Steps.Step>
+    <Steps.Step status='process' title='步骤2' icon={imgIcon}></Steps.Step>
+    <Steps.Step status='wait' title='步骤3' icon={<div className='my-step-icon'><span className='anticon anticon-github'></span></div>}></Steps.Step>
+  </Steps>, container);
 
-````
\ No newline at end of file
+````

components/steps/demo/small-size.md

@@ -2,8 +2,41 @@
 
 - order: 1
 
-迷你版的步进条，通过设置`<Steps size='small'>`启用
+迷你版的步进条，通过设置`<Steps size='small'>`启用.
+
+---
 
 ````jsx
+'use strict';
+
+var Steps = antd.Steps;
+
+var container = document.getElementById('components-steps-demo-small-size');
+
+
+var steps = [{
+  status: 'finish',
+  title: '已完成'
+}, {
+  status: 'process',
+  title: '进行中'
+}, {
+  status: 'wait',
+  title: '待运行'
+}, {
+  status: 'wait',
+  title: '待运行'
+}].map(function(s, i) {
+    return (<Steps.Step
+        key={i}
+        status={s.status}
+        title={s.title}
+        ></Steps.Step>
+    );
+  });
 
+React.render(
+  <Steps size="small">
+    {steps}
+  </Steps>, container);
 ````
\ No newline at end of file

components/steps/demo/step-next.md

@@ -2,7 +2,70 @@
 
 - order: 3
 
+---
+
+````css
+.my-step-form {
+  width: 100%;
+}
+.my-step-form > div {
+  margin-bottom: 20px;
+}
+.my-step-container {
+  width: 100%;
+}
+````
 
 ````jsx
+var container = document.getElementById('components-steps-demo-step-next');
+var steps = (function generateRandomSteps() {
+  var n = Math.floor(Math.random() * 3) + 3;
+  var arr = [];
+  for (var i = 0; i < n; i++ ) {
+    arr.push({
+      title: '步骤' + (i+1)
+    });
+  }
+  return arr;
+})();
+
+var MyForm = React.createClass({
+  getInitialState() {
+    return {
+      currentStep: Math.floor(Math.random() * steps.length)
+    }
+  },
+  nextStep() {
+    var s = this.state.currentStep + 1;
+    if (s === steps.length) {
+      s = 0;
+    }
+    this.setState({
+      currentStep: s
+    });
+  },
+  render() {
+    var cs = this.state.currentStep;
+    return (<form className='my-step-form'>
+      <div>这个demo随机生成3~6个步骤，初始随机进行到其中一个步骤</div>
+      <div>当前正在执行第{cs + 1}步</div>
+      <div className='my-step-container'><Steps>
+        {steps.map(function(s, i) {
+          return <Steps.Step
+            key={i}
+            status={cs === i ? 'process' : (cs > i ? 'finish' : 'wait')}
+            title={s.title}
+            ></Steps.Step>
+        })}
+      </Steps></div>
+      <div>表单输入A：<input /></div>
+      <div>表单输入B：<input /></div>
+      <div>表单输入C：<input /></div>
+      <div><span className='ant-btn' onClick={this.nextStep}>下一步</span></div>
+    </form>)
+  }
+});
+
+React.render(<MyForm></MyForm>, container);
 
 ````
\ No newline at end of file

components/steps/index.md

@@ -3,6 +3,7 @@
 - category: Components
 - chinese: 步进条
 - order: 8
+- cols: 1
 
 ---
 

style/components/steps.less

@@ -20,10 +20,7 @@
       .rc-steps-head {
         border-color: @wait-color;
         background-color: #fff;
-        &.rc-steps-custom {
-          background: none;
-          border: 0;
-        }
+
         > .rc-steps-icon {
           color: @wait-color;
         }
@@ -33,10 +30,7 @@
       .rc-steps-head {
         border-color: @active-color;
         background-color: @active-color;
-        &.rc-steps-custom {
-          background: none;
-          border: 0;
-        }
+
         > .rc-steps-icon {
           color: #fff;
         }
@@ -46,19 +40,22 @@
       .rc-steps-head {
         border-color: @active-color;
         background-color: #fff;
-        &.rc-steps-custom {
-          background: none;
-          border: 0;
-        }
         > .rc-steps-icon {
           color: @active-color;
         }
       }
-      //.rc-steps-tail {
-      //  > i {
-      //    background: @active-color;
-      //  }
-      //}
+    }
+
+    &.rc-steps-custom {
+      .rc-steps-head {
+        background: none;
+        border: 0;
+      }
+      &.rc-steps-status-process {
+        .rc-steps-title {
+          color: @active-color;
+        }
+      }
     }
 
   }
@@ -81,8 +78,9 @@
     .transition(border-color 0.1s ease);
 
     > .rc-steps-icon {
+      line-height: 1;
       display: inline-block;
-      vertical-align: inherit;
+      vertical-align: text-top;
       color: #3fc7fa;
       position: relative;
     }
@@ -104,7 +102,7 @@
   .rc-steps-tail {
     width: 0;
     position: relative;
-    top: 13px;
+    top: 12px;
     padding:0 10px;
     > i {
       display: inline-block;
@@ -115,7 +113,6 @@
     }
   }
 
-
   &.rc-steps-small {
     .rc-steps-head {
       border:1px solid @wait-color;
@@ -127,9 +124,6 @@
       font-size: 10px;
       margin-right: 10px;
 
-      > .rc-steps-icon {
-        top: 0;
-      }
     }
     .rc-steps-main {
       max-width: 75px;
@@ -146,7 +140,7 @@
       color: #999;
     }
     .rc-steps-tail {
-      top: 9px;
+      top: 8px;
       padding:0 8px;
       > i {
         height: 1px;
@@ -156,7 +150,13 @@
     }
   }
 
-  &.rc-steps-small .rc-steps-head.rc-steps-custom, .rc-steps-head.rc-steps-custom {
+  &.rc-steps-init, &.rc-steps-init.rc-steps-small {
+    .rc-steps-tail {
+      padding: 0;
+    }
+  }
+
+  &.rc-steps-small .rc-steps-item.rc-steps-custom .rc-steps-head, .rc-steps-item.rc-steps-custom .rc-steps-head {
     width: inherit;
     height: inherit;
     line-height: inherit;