diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
new file mode 100644
index 0000000000..37d881fc45
--- /dev/null
+++ b/components/steps/demo/error.md
@@ -0,0 +1,27 @@
+---
+order: 6
+title: 发生错误
+---
+
+使用 Steps 的 `status` 属性来指定当前步骤的状态。
+
+````jsx
+import { Steps } from 'antd';
+const Step = Steps.Step;
+
+const steps = [{
+ title: '已完成',
+ description: '这里是多信息的描述啊'
+}, {
+ title: '错误示例',
+ description: '这里是多信息的耶哦耶哦哦耶哦耶'
+}, {
+ title: '又一个待运行',
+ description: '描述啊描述啊'
+}, {
+ title: '待运行',
+ description: '这里是多信息的描述啊'
+}].map((s, i) => );
+
+ReactDOM.render({steps}, mountNode);
+````
diff --git a/components/steps/index.jsx b/components/steps/index.jsx
index 897ffaa241..3440931f2e 100644
--- a/components/steps/index.jsx
+++ b/components/steps/index.jsx
@@ -8,7 +8,7 @@ export default class Steps extends React.Component {
prefixCls: 'ant-steps',
iconPrefix: 'ant',
maxDescriptionWidth: 100,
- current: 0
+ current: 0,
}
render() {
@@ -17,14 +17,7 @@ export default class Steps extends React.Component {
maxDescriptionWidth = 'auto';
}
return (
-
- {this.props.children}
-
+
);
}
}
diff --git a/components/steps/index.md b/components/steps/index.md
index ac3bc199bf..edf29414d5 100644
--- a/components/steps/index.md
+++ b/components/steps/index.md
@@ -27,8 +27,9 @@ english: Steps
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 |
-|-----------|------------------------------------------|-------------|-------|
+|----------|------------------------------------------|-------------|-------|
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 |
+| status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | `process` |
| size | 指定大小,目前支持普通(`default`)和迷你(`small`)| string | default |
| direction | 指定步骤条方向。目前支持水平和竖直(`vertical`)两种方向,默认水平方向) | string | - |
| maxDescriptionWidth | 指定步骤的详细描述文字的最大宽度(单位 px) | number | 100 |
@@ -39,7 +40,7 @@ english: Steps
| 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------|
-| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` | string | `wait` |
+| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | string | `wait` |
| title | 标题 | React.Element | - |
| description | 步骤的详情描述,可选 | React.Element | - |
| icon | 步骤图标,可选 | React.Element | - |
diff --git a/package.json b/package.json
index dff4a14445..977c4bb116 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
"rc-rate": "~1.1.0",
"rc-select": "~6.0.1",
"rc-slider": "~3.5.1",
- "rc-steps": "~1.4.1",
+ "rc-steps": "~1.5.0",
"rc-switch": "~1.3.2",
"rc-table": "~4.0.0-beta.3",
"rc-tabs": "~5.8.0",
diff --git a/style/components/steps.less b/style/components/steps.less
index 1b27b93ebb..a92a77d304 100644
--- a/style/components/steps.less
+++ b/style/components/steps.less
@@ -14,7 +14,10 @@
@finish-title-color: @wait-title-color;
@finish-description-color: @finish-title-color;
@finish-tail-color: @process-icon-color;
-
+@error-icon-color: @error-color;
+@error-title-color: @error-color;
+@error-description-color: @error-color;
+@error-tail-color: @error-color;
.@{steps-prefix-cls} {
font-size: 0;
@@ -83,6 +86,32 @@
}
}
+ &.@{steps-prefix-cls}-status-error {
+ .@{steps-prefix-cls}-head-inner {
+ border-color: @error-icon-color;
+ background-color: @error-icon-color;
+ > .@{steps-prefix-cls}-icon {
+ color: #fff;
+ }
+ }
+ .@{steps-prefix-cls}-title {
+ color: @error-title-color;
+ }
+ .@{steps-prefix-cls}-description {
+ color: @error-description-color;
+ }
+ .@{steps-prefix-cls}-tail > i {
+ background-color: @process-tail-color;
+ }
+ }
+
+ &.@{steps-prefix-cls}-next-error {
+ .@{steps-prefix-cls}-tail > i,
+ .@{steps-prefix-cls}-tail > i:after {
+ background-color: @error-tail-color;
+ }
+ }
+
&.@{steps-prefix-cls}-custom {
.@{steps-prefix-cls}-head-inner {
background: none;