Browse Source

update rc-steps v1.2.5 Steps组件增加current属性,可自动判断当前正在执行状态。

pull/297/head
羽航 9 years ago
parent
commit
f4372f3cbf
  1. 7
      components/steps/demo/simple.md
  2. 3
      components/steps/demo/step-next.md
  3. 4
      components/steps/index.jsx
  4. 3
      components/steps/index.md
  5. 2
      package.json

7
components/steps/demo/simple.md

@ -12,29 +12,24 @@ var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-simple'); var container = document.getElementById('components-steps-demo-simple');
var steps = [{ var steps = [{
status: 'finish',
title: '已完成', title: '已完成',
description: '这里是多信息的描述啊' description: '这里是多信息的描述啊'
}, { }, {
status: 'process',
title: '进行中', title: '进行中',
description: '这里是多信息的耶哦耶哦哦耶哦耶' description: '这里是多信息的耶哦耶哦哦耶哦耶'
}, { }, {
status: 'wait',
title: '又一个待运行', title: '又一个待运行',
description: '描述啊描述啊' description: '描述啊描述啊'
}, { }, {
status: 'wait',
title: '待运行', title: '待运行',
description: '这里是多信息的描述啊' description: '这里是多信息的描述啊'
}].map(function(s, i) { }].map(function(s, i) {
return (<Step return (<Step
key={i} key={i}
status={s.status}
title={s.title} title={s.title}
description={s.description}></Step> description={s.description}></Step>
); );
}); });
React.render(<Steps>{steps}</Steps>, container); React.render(<Steps current={1}>{steps}</Steps>, container);
```` ````

3
components/steps/demo/step-next.md

@ -46,11 +46,10 @@ var MyForm = React.createClass({
var cs = this.state.currentStep; var cs = this.state.currentStep;
return (<form className='my-step-form'> return (<form className='my-step-form'>
<div>当前正在执行第{cs + 1}步</div> <div>当前正在执行第{cs + 1}步</div>
<div className='my-step-container'><Steps> <div className='my-step-container'><Steps current={cs}>
{steps.map(function(s, i) { {steps.map(function(s, i) {
return <Steps.Step return <Steps.Step
key={i} key={i}
status={cs === i ? 'process' : (cs > i ? 'finish' : 'wait')}
title={s.title} title={s.title}
></Steps.Step> ></Steps.Step>
})} })}

4
components/steps/index.jsx

@ -7,12 +7,14 @@ const AntSteps = React.createClass({
prefixCls: 'ant-steps', prefixCls: 'ant-steps',
iconPrefix: 'ant', iconPrefix: 'ant',
size: 'default', size: 'default',
maxDescriptionWidth: 100 maxDescriptionWidth: 100,
current: 0
}; };
}, },
render() { render() {
return ( return (
<Steps size={this.props.size} <Steps size={this.props.size}
current={this.props.current}
direction={this.props.direction} direction={this.props.direction}
iconPrefix={this.props.iconPrefix} iconPrefix={this.props.iconPrefix}
maxDescriptionWidth={this.props.maxDescriptionWidth} maxDescriptionWidth={this.props.maxDescriptionWidth}

3
components/steps/index.md

@ -32,6 +32,7 @@
| size | 可选参数,指定大小(目前只支持普通和迷你两种大小)。 | string | small, default | default | | size | 可选参数,指定大小(目前只支持普通和迷你两种大小)。 | string | small, default | default |
| direction | 可选参数,指定步骤条方向(目前支持水平和竖直两种方向,默认水平方向)。 | string | vertical | 无 | | direction | 可选参数,指定步骤条方向(目前支持水平和竖直两种方向,默认水平方向)。 | string | vertical | 无 |
| maxDescriptionWidth | 可选参数,指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 | | maxDescriptionWidth | 可选参数,指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
| current | 可选参数,指定当前处理正在执行状态的步骤,从0开始记数。在子Step元素中,可以通过status属性覆盖状态。 | number | 无 | 0 |
### Steps.Step ### Steps.Step
@ -39,7 +40,7 @@
| 参数 | 说明 | 类型 | 可选值 |默认值 | | 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------| |-----------|------------------------------------------|------------|-------|--------|
| status | 必要参数,指定状态。 | string | wait, process, finish | 无 | | status | 可选参数,指定状态。当不配置该属性时,会使用父Steps元素的current来自动指定状态。 | string | wait, process, finish | 无 | wait |
| title | 必要参数,标题。 | string/jsx | 无 | 无 | | title | 必要参数,标题。 | string/jsx | 无 | 无 |
| description | 可选参数,步骤的详情描述。 | string/jsx | 无 | 空 | | description | 可选参数,步骤的详情描述。 | string/jsx | 无 | 空 |
| icon | 可选参数,步骤的Icon。如果不指定,则使用默认的样式。 | string/jsx | 无 | 空 | | icon | 可选参数,步骤的Icon。如果不指定,则使用默认的样式。 | string/jsx | 无 | 空 |

2
package.json

@ -52,7 +52,7 @@
"rc-radio": "~2.0.0", "rc-radio": "~2.0.0",
"rc-select": "~4.9.0", "rc-select": "~4.9.0",
"rc-slider": "~1.4.0", "rc-slider": "~1.4.0",
"rc-steps": "~1.2.4", "rc-steps": "~1.2.5",
"rc-switch": "~1.2.0", "rc-switch": "~1.2.0",
"rc-table": "~3.2.0", "rc-table": "~3.2.0",
"rc-tabs": "~5.3.2", "rc-tabs": "~5.3.2",

Loading…
Cancel
Save