mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
update demos
This commit is contained in:
parent
9c598b8bf7
commit
1fea96ac42
@ -1,4 +1,4 @@
|
||||
# Steps 自定义图标步进条
|
||||
# 自定义图标步进条
|
||||
|
||||
- order: 2
|
||||
|
||||
@ -23,12 +23,8 @@
|
||||
````
|
||||
|
||||
````jsx
|
||||
'use strict';
|
||||
|
||||
var Steps = antd.Steps;
|
||||
|
||||
var container = document.getElementById('components-steps-demo-custom-icon');
|
||||
|
||||
var imgIcon = <div className='my-step-icon'><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/></div>
|
||||
|
||||
|
||||
|
@ -1,19 +1,15 @@
|
||||
# Steps 基本用法
|
||||
# 基本用法
|
||||
|
||||
- order: 0
|
||||
|
||||
简单的步进条
|
||||
简单的步骤条
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
'use strict';
|
||||
|
||||
var Steps = antd.Steps;
|
||||
|
||||
var container = document.getElementById('components-steps-demo-simple');
|
||||
|
||||
|
||||
var steps = [{
|
||||
status: 'finish',
|
||||
title: '已完成',
|
||||
@ -43,4 +39,4 @@ React.render(
|
||||
<Steps>
|
||||
{steps}
|
||||
</Steps>, container);
|
||||
````
|
||||
````
|
||||
|
@ -1,4 +1,4 @@
|
||||
# Steps 迷你版步进条
|
||||
# 迷你版
|
||||
|
||||
- order: 1
|
||||
|
||||
@ -7,13 +7,9 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
'use strict';
|
||||
|
||||
var Steps = antd.Steps;
|
||||
|
||||
var container = document.getElementById('components-steps-demo-small-size');
|
||||
|
||||
|
||||
var steps = [{
|
||||
status: 'finish',
|
||||
title: '已完成'
|
||||
@ -27,16 +23,13 @@ var steps = [{
|
||||
status: 'wait',
|
||||
title: '待运行'
|
||||
}].map(function(s, i) {
|
||||
return (<Steps.Step
|
||||
key={i}
|
||||
status={s.status}
|
||||
title={s.title}
|
||||
></Steps.Step>
|
||||
);
|
||||
});
|
||||
return (<Steps.Step
|
||||
key={i}
|
||||
status={s.status}
|
||||
title={s.title}>
|
||||
</Steps.Step>
|
||||
);
|
||||
});
|
||||
|
||||
React.render(
|
||||
<Steps size="small">
|
||||
{steps}
|
||||
</Steps>, container);
|
||||
````
|
||||
React.render(<Steps size="small">{steps}</Steps>, container);
|
||||
````
|
||||
|
@ -1,10 +1,12 @@
|
||||
# Steps 如何控制切换到下一步
|
||||
# 切换到下一步
|
||||
|
||||
- order: 3
|
||||
|
||||
随机生成3~6个步骤,初始随机进行到其中一个步骤。
|
||||
|
||||
---
|
||||
|
||||
````css
|
||||
<style>
|
||||
.my-step-form {
|
||||
width: 100%;
|
||||
}
|
||||
@ -14,7 +16,7 @@
|
||||
.my-step-container {
|
||||
width: 100%;
|
||||
}
|
||||
````
|
||||
</style>
|
||||
|
||||
````jsx
|
||||
var container = document.getElementById('components-steps-demo-step-next');
|
||||
@ -47,7 +49,6 @@ var MyForm = React.createClass({
|
||||
render() {
|
||||
var cs = this.state.currentStep;
|
||||
return (<form className='my-step-form'>
|
||||
<div>这个demo随机生成3~6个步骤,初始随机进行到其中一个步骤</div>
|
||||
<div>当前正在执行第{cs + 1}步</div>
|
||||
<div className='my-step-container'><Steps>
|
||||
{steps.map(function(s, i) {
|
||||
@ -67,5 +68,4 @@ var MyForm = React.createClass({
|
||||
});
|
||||
|
||||
React.render(<MyForm></MyForm>, container);
|
||||
|
||||
````
|
||||
````
|
||||
|
@ -1,7 +1,7 @@
|
||||
# Steps
|
||||
|
||||
- category: Components
|
||||
- chinese: 步进条
|
||||
- chinese: 步骤条
|
||||
- order: 8
|
||||
- cols: 1
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user