Update code style of Steps demos

pull/2452/head
afc163 9 years ago
parent a26c2e8888
commit 54c7192d1e

@ -9,19 +9,12 @@ title: 步骤运行错误
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
title: '已完成',
description: '这里是多信息的描述啊',
}, {
title: '错误示例',
description: '这里是多信息的耶哦耶哦哦耶哦耶',
}, {
title: '又一个待运行',
description: '描述啊描述啊',
}, {
title: '待运行',
description: '这里是多信息的描述啊',
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps current={1} status="error">{steps}</Steps>, mountNode);
ReactDOM.render(
<Steps current={1} status="error">
<Step title="已完成" description="这里是多信息的描述" />
<Step title="进行中" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
</Steps>
, mountNode);
````

@ -9,9 +9,11 @@ title: 带图标的步骤条
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(<Steps>
ReactDOM.render(
<Steps>
<Step status="finish" title="步骤1" icon="cloud" />
<Step status="process" title="步骤2" icon="apple" />
<Step status="wait" title="步骤3" icon="github" />
</Steps>, mountNode);
</Steps>
, mountNode);
````

@ -9,19 +9,12 @@ title: 基本用法
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
title: '已完成',
description: '这里是多信息的描述啊',
}, {
title: '进行中',
description: '这里是多信息的耶哦耶哦哦耶哦耶',
}, {
title: '又一个待运行',
description: '描述啊描述啊',
}, {
title: '待运行',
description: '这里是多信息的描述啊',
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps current={1}>{steps}</Steps>, mountNode);
ReactDOM.render(
<Steps current={1}>
<Step title="已完成" description="这里是多信息的描述" />
<Step title="进行中" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
</Steps>
, mountNode);
````

@ -9,19 +9,12 @@ title: 迷你版
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
status: 'finish',
title: '已完成',
}, {
status: 'process',
title: '进行中',
}, {
status: 'wait',
title: '待运行',
}, {
status: 'wait',
title: '待运行',
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, mountNode);
ReactDOM.render(
<Steps size="small" current={1}>
<Step title="已完成" />
<Step title="进行中" />
<Step title="待运行" />
<Step title="待运行" />
</Steps>
, mountNode);
````

@ -5,43 +5,33 @@ title: 切换到下一步
随机生成 3~6 个步骤,初始随机进行到其中一个步骤。
````css
#components-steps-demo-step-next > div > div {
margin-bottom: 30px;
}
````
````jsx
import { Steps, Button } from 'antd';
const Step = Steps.Step;
const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
const steps = array.map((item, i) => {
return {
const steps = array.map((item, i) => ({
title: `步骤${i + 1}`,
};
});
}));
const App = React.createClass({
getInitialState() {
return {
currentStep: Math.floor(Math.random() * steps.length),
current: Math.floor(Math.random() * steps.length),
};
},
next() {
let s = this.state.currentStep + 1;
if (s === steps.length) {
s = 0;
let current = this.state.current + 1;
if (current === steps.length) {
current = 0;
}
this.setState({
currentStep: s,
});
this.setState({ current });
},
render() {
const cs = this.state.currentStep;
const { current } = this.state;
return (
<div>
<div style={{ marginBottom: 24 }}>当前正在执行第 {cs + 1} 步</div>
<Steps current={cs}>
<div style={{ marginBottom: 24 }}>当前正在执行第 {current + 1} 步</div>
<Steps current={current}>
{steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
</Steps>
<div style={{ marginTop: 24 }}>

@ -9,17 +9,12 @@ title: 竖直方向的小型步骤条
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
title: '已完成',
description: '这里是信息的描述',
}, {
title: '进行中',
description: '这里是信息的描述',
}, {
title: '待运行',
description: '这里是信息的描述',
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>,
mountNode);
ReactDOM.render(
<Steps direction="vertical" size="small" current={1}>
<Step title="已完成" description="这里是多信息的描述" />
<Step title="进行中" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
</Steps>
, mountNode);
````

@ -9,20 +9,12 @@ title: 竖直方向的步骤条
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
title: '已完成',
description: '这里是信息的描述',
}, {
title: '进行中',
description: '这里是信息的描述',
}, {
title: '待运行',
description: '这里是信息的描述',
}, {
title: '又一个待运行',
description: '这里是信息的描述',
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
mountNode);
ReactDOM.render(
<Steps direction="vertical" current={1}>
<Step title="已完成" description="这里是多信息的描述" />
<Step title="进行中" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
<Step title="待运行" description="这里是多信息的描述" />
</Steps>
, mountNode);
````

Loading…
Cancel
Save