test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

feat: Steps.Step[icon] support React.ReactNode, close: #3159

Browse Source
This commit is contained in:
Benjy Cui 2016-09-29 16:12:43 +08:00
parent 539bb33fe5
commit 1e65cac784
10 changed files with 29 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/steps/demo/error.md
View File

@ -19,10 +19,9 @@ const Step = Steps.Step;
ReactDOM.render( ReactDOM.render(
<Steps current={1} status="error"> <Steps current={1} status="error">
<Step title="已完成" description="这里是多信息的描述" /> <Step title="finished" description="This is description" />
<Step title="进行中" description="这里是多信息的描述" /> <Step title="In Process" description="This is description" />
<Step title="待运行" description="这里是多信息的描述" /> <Step title="Waiting" description="This is description" />
<Step title="待运行" description="这里是多信息的描述" />
</Steps> </Steps>
, mountNode); , mountNode);
```` ````

8
components/steps/demo/icon.md
View File

@ -14,14 +14,14 @@ title:
You can use your own custom icons by setting the property `icon` for `Steps.Step`. You can use your own custom icons by setting the property `icon` for `Steps.Step`.
````jsx ````jsx
import { Steps } from 'antd'; import { Steps, Icon } from 'antd';
const Step = Steps.Step; const Step = Steps.Step;
ReactDOM.render( ReactDOM.render(
<Steps> <Steps>
<Step status="finish" title="步骤1" icon="cloud" /> <Step status="finish" title="Step 1" icon="cloud" />
<Step status="process" title="步骤2" icon="apple" /> <Step status="process" title="Step 2" icon="apple" />
<Step status="wait" title="步骤3" icon="github" /> <Step status="wait" title="Step 3" icon={<Icon type="github" />} />
</Steps> </Steps>
, mountNode); , mountNode);
```` ````

7
components/steps/demo/simple.md
View File

@ -19,10 +19,9 @@ const Step = Steps.Step;
ReactDOM.render( ReactDOM.render(
<Steps current={1}> <Steps current={1}>
<Step title="已完成" description="这里是多信息的描述" /> <Step title="Finished" description="This is description." />
<Step title="进行中" description="这里是多信息的描述" /> <Step title="In Progress" description="This is description." />
<Step title="待运行" description="这里是多信息的描述" /> <Step title="Waiting" description="This is description." />
<Step title="待运行" description="这里是多信息的描述" />
</Steps> </Steps>
, mountNode); , mountNode);
```` ````

7
components/steps/demo/small-size.md
View File

@ -19,10 +19,9 @@ const Step = Steps.Step;
ReactDOM.render( ReactDOM.render(
<Steps size="small" current={1}> <Steps size="small" current={1}>
<Step title="已完成" /> <Step title="Finished" />
<Step title="进行中" /> <Step title="In Progress" />
<Step title="待运行" /> <Step title="Waiting" />
<Step title="待运行" />
</Steps> </Steps>
, mountNode); , mountNode);
```` ````

6
components/steps/demo/step-next.md
View File

@ -18,7 +18,7 @@ import { Steps, Button } from 'antd';
const Step = Steps.Step; const Step = Steps.Step;
const array = [...Array(Math.floor(Math.random() * 3) + 3)]; const array = [...Array(Math.floor(Math.random() * 3) + 3)];
const steps = array.map((item, i) => ({ const steps = array.map((item, i) => ({
title: `步骤${i + 1}`, title: `Step ${i + 1}`,
})); }));
const App = React.createClass({ const App = React.createClass({
@ -38,12 +38,12 @@ const App = React.createClass({
const { current } = this.state; const { current } = this.state;
return ( return (
<div> <div>
<div style={{ marginBottom: 24 }}>当前正在执行第 {current + 1} 步</div> <div style={{ marginBottom: 24 }}>Curent Step {current + 1}</div>
<Steps current={current}> <Steps current={current}>
{steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)} {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
</Steps> </Steps>
<div style={{ marginTop: 24 }}> <div style={{ marginTop: 24 }}>
<Button onClick={this.next}>下一步</Button> <Button onClick={this.next}>Next Step</Button>
</div> </div>
</div> </div>
); );

7
components/steps/demo/vertical-small.md
View File

@ -19,10 +19,9 @@ const Step = Steps.Step;
ReactDOM.render( ReactDOM.render(
<Steps direction="vertical" size="small" current={1}> <Steps direction="vertical" size="small" current={1}>
<Step title="已完成" description="这里是多信息的描述" /> <Step title="Finished" description="This is description." />
<Step title="进行中" description="这里是多信息的描述" /> <Step title="In Progress" description="This is description." />
<Step title="待运行" description="这里是多信息的描述" /> <Step title="Waiting" description="This is description." />
<Step title="待运行" description="这里是多信息的描述" />
</Steps> </Steps>
, mountNode); , mountNode);
```` ````

7
components/steps/demo/vertical.md
View File

@ -19,10 +19,9 @@ const Step = Steps.Step;
ReactDOM.render( ReactDOM.render(
<Steps direction="vertical" current={1}> <Steps direction="vertical" current={1}>
<Step title="已完成" description="这里是多信息的描述" /> <Step title="Finished" description="This is description." />
<Step title="进行中" description="这里是多信息的描述" /> <Step title="In Progress" description="This is description." />
<Step title="待运行" description="这里是多信息的描述" /> <Step title="Waiting" description="This is description." />
<Step title="待运行" description="这里是多信息的描述" />
</Steps> </Steps>
, mountNode); , mountNode);
```` ````

6
components/steps/index.en-US.md
View File

@ -39,6 +39,6 @@ A single step in the step bar.
Property | Description | Type | Default Property | Description | Type | Default
-----|-----|-----|------ -----|-----|-----|------
status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | String | wait status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | String | wait
title | title of the step | React.Element | - title | title of the step | React.ReactNode | -
description | detail of the step, optional property | React.Element | - description | detail of the step, optional property | React.ReactNode | -
icon | icon of the step, optional property | React.Element | - icon | icon of the step, optional property | string or React.ReactNode | -

6
components/steps/index.zh-CN.md
View File

@ -40,6 +40,6 @@ title: Steps
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------| |----------|-----------------------------------------|------------|-------|
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | String | wait | | status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | String | wait |
| title | 标题 | React.Element | - | | title | 标题 | React.ReactNode | - |
| description | 步骤的详情描述，可选 | React.Element | - | | description | 步骤的详情描述，可选 | React.ReactNode | - |
| icon | 步骤图标的类型，可选 | string | - | | icon | 步骤图标的类型，可选 | string or React.ReactNode | - |

2
package.json
View File

@ -60,7 +60,7 @@
"rc-rate": "~1.1.2", "rc-rate": "~1.1.2",
"rc-select": "~6.5.1", "rc-select": "~6.5.1",
"rc-slider": "~5.1.0", "rc-slider": "~5.1.0",
"rc-steps": "~2.1.5", "rc-steps": "~2.2.0",
"rc-switch": "~1.4.2", "rc-switch": "~1.4.2",
"rc-table": "~5.0.0", "rc-table": "~5.0.0",
"rc-tabs": "~7.0.5", "rc-tabs": "~7.0.5",