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;