var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-simple');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是多信息的描述啊'
}, {
- status: 'process',
title: '进行中',
description: '这里是多信息的耶哦耶哦哦耶哦耶'
}, {
- status: 'wait',
title: '又一个待运行',
description: '描述啊描述啊'
}, {
- status: 'wait',
title: '待运行',
description: '这里是多信息的描述啊'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}
- description={s.description}></Step>
+ return (
+ <Step key={i} title={s.title} description={s.description} />
);
});
-React.render(<Steps>{steps}</Steps>, container);var Steps = antd.Steps;
var Step = Steps.Step;
@@ -47,14 +44,12 @@ React.render(React.createElement(
status: 'wait',
title: '待运行'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}>
- </Step>);
+ return (
+ <Step key={i} title={s.title} description={s.description} />
+ );
});
-React.render(<Steps size="small">{steps}</Steps>, container);var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-status');
+
+var steps = [{
+ status: 'finish',
+ title: '已完成',
+ description: '这里是多信息的描述啊'
+}, {
+ status: 'process',
+ title: '进行中',
+ description: '这里是多信息的耶哦耶哦哦耶哦耶'
+}, {
+ status: 'wait',
+ title: '又一个待运行',
+ description: '描述啊描述啊'
+}, {
+ status: 'wait',
+ title: '待运行',
+ description: '这里是多信息的描述啊'
+}].map(function(s, i) {
+ return (
+ <Step key={i} title={s.title} status={s.status} description={s.description} />
+ );
+});
+
+React.render(<Steps>{steps}</Steps>, container);可以使用 status 定义每个步骤的状态。
form.my-step-form > div {
+}#components-steps-demo-step-next > div > div {
margin-bottom: 30px;
}
var Steps = antd.Steps;
+React.render(React.createElement(App, null), container);})()var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-step-next');
-var steps = (function generateRandomSteps() {
- var n = Math.floor(Math.random() * 3) + 3;
- var arr = [];
- for (var i = 0; i < n; i++ ) {
- arr.push({
- title: '步骤' + (i+1)
- });
- }
- return arr;
-})();
+var array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
+var steps = array.map(function(item, i) {
+ return {
+ title: '步骤' + (i + 1)
+ };
+});
-var MyForm = React.createClass({
+var App = React.createClass({
getInitialState() {
return {
currentStep: Math.floor(Math.random() * steps.length)
}
},
- nextStep() {
+ next() {
var s = this.state.currentStep + 1;
if (s === steps.length) {
s = 0;
@@ -109,23 +93,21 @@ React.render(React.createElement(MyForm, null), container);})()var cs = this.state.currentStep;
- return (<form className='my-step-form'>
- <div>当前正在执行第{cs + 1}步</div>
- <div className='my-step-container'><Steps>
- {steps.map(function(s, i) {
- return <Steps.Step
- key={i}
- status={cs === i ? 'process' : (cs > i ? 'finish' : 'wait')}
- title={s.title}
- ></Steps.Step>
- })}
- </Steps></div>
- <div><span className='ant-btn' onClick={this.nextStep}>下一步</span></div>
- </form>)
+ return (
+ <div>
+ <div>当前正在执行第 {cs + 1} 步</div>
+ <Steps current={cs}>
+ {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
+ </Steps>
+ <div>
+ <button className='ant-btn' onClick={this.next}>下一步</button>
+ </div>
+ </div>
+ );
}
});
-React.render(<MyForm></MyForm>, container);
+React.render(<App />, container);
diff --git a/components/steps/demo/vertical-small.html b/components/steps/demo/vertical-small.html
index 55f4244ab..dae30d57e 100644
--- a/components/steps/demo/vertical-small.html
+++ b/components/steps/demo/vertical-small.html
@@ -8,55 +8,42 @@ var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical-small');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}].map(function (s, i) {
- return React.createElement(Step, {
- key: i,
- status: s.status,
- title: s.title,
- description: s.description });
+ return React.createElement(Step, { key: i, title: s.title, description: s.description });
});
React.render(React.createElement(
Steps,
- { size: 'small', direction: 'vertical' },
+ { size: 'small', direction: 'vertical', current: 1 },
steps
), container);})()var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical-small');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}
- description={s.description}></Step>
+ return (
+ <Step key={i} title={s.title} description={s.description} />
);
});
-React.render(<Steps size='small' direction='vertical'>{steps}</Steps>, container);
+React.render(<Steps size='small' direction='vertical' current={1}>{steps}</Steps>, container);
diff --git a/components/steps/demo/vertical.html b/components/steps/demo/vertical.html
index 4fdb6d90b..7e74a55f1 100644
--- a/components/steps/demo/vertical.html
+++ b/components/steps/demo/vertical.html
@@ -8,63 +8,48 @@ var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '又一个待运行',
description: '这里是信息的描述'
}].map(function (s, i) {
- return React.createElement(Step, {
- key: i,
- status: s.status,
- title: s.title,
- description: s.description });
+ return React.createElement(Step, { key: i, title: s.title, description: s.description });
});
React.render(React.createElement(
Steps,
- { direction: 'vertical' },
+ { direction: 'vertical', current: 1 },
steps
), container);})()var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '又一个待运行',
description: '这里是信息的描述'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}
- description={s.description}></Step>
+ return (
+ <Step key={i} title={s.title} description={s.description} />
);
});
-React.render(<Steps direction='vertical'>{steps}</Steps>, container);
+React.render(<Steps direction='vertical' current={1}>{steps}</Steps>, container);
diff --git a/components/steps/index.html b/components/steps/index.html
index 82ab4aa69..0c38839fe 100644
--- a/components/steps/index.html
+++ b/components/steps/index.html
@@ -13,7 +13,7 @@ Steps 步骤条 - Ant Design
-
+
-
+
var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-simple');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是多信息的描述啊'
}, {
- status: 'process',
title: '进行中',
description: '这里是多信息的耶哦耶哦哦耶哦耶'
}, {
- status: 'wait',
title: '又一个待运行',
description: '描述啊描述啊'
}, {
- status: 'wait',
title: '待运行',
description: '这里是多信息的描述啊'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}
- description={s.description}></Step>
+ return (
+ <Step key={i} title={s.title} description={s.description} />
);
});
-React.render(<Steps>{steps}</Steps>, container);
+React.render(<Steps current={1}>{steps}</Steps>, container);
@@ -734,15 +727,12 @@ var steps = [{
status: 'wait',
title: '待运行'
}].map(function (s, i) {
- return React.createElement(Step, {
- key: i,
- status: s.status,
- title: s.title });
+ return React.createElement(Step, { key: i, title: s.title, description: s.description });
});
React.render(React.createElement(
Steps,
- { size: 'small' },
+ { size: 'small', current: 1 },
steps
), container);})()var Steps = antd.Steps;
var Step = Steps.Step;
@@ -761,14 +751,12 @@ React.render(React.createElement(
status: 'wait',
title: '待运行'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}>
- </Step>);
+ return (
+ <Step key={i} title={s.title} description={s.description} />
+ );
});
-React.render(<Steps size="small">{steps}</Steps>, container);
+React.render(<Steps size="small" current={1}>{steps}</Steps>, container);
@@ -797,9 +785,9 @@ React.render(React.createElement(
var container = document.getElementById('components-steps-demo-icon');
React.render(<Steps>
- <Step status='finish' title='步骤1' icon='cloud'></Step>
- <Step status='process' title='步骤2' icon='apple'></Step>
- <Step status='wait' title='步骤3' icon='github'></Step>
+ <Step status='finish' title='步骤1' icon='cloud' />
+ <Step status='process' title='步骤2' icon='apple' />
+ <Step status='wait' title='步骤3' icon='github' />
</Steps>, container);
@@ -812,35 +800,31 @@ React.render(<Steps
- form.my-step-form > div {
+}#components-steps-demo-step-next > div > div {
margin-bottom: 30px;
}
var Steps = antd.Steps;
+React.render(React.createElement(App, null), container);})()var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-step-next');
-var steps = (function generateRandomSteps() {
- var n = Math.floor(Math.random() * 3) + 3;
- var arr = [];
- for (var i = 0; i < n; i++ ) {
- arr.push({
- title: '步骤' + (i+1)
- });
- }
- return arr;
-})();
+var array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
+var steps = array.map(function(item, i) {
+ return {
+ title: '步骤' + (i + 1)
+ };
+});
-var MyForm = React.createClass({
+var App = React.createClass({
getInitialState() {
return {
currentStep: Math.floor(Math.random() * steps.length)
}
},
- nextStep() {
+ next() {
var s = this.state.currentStep + 1;
if (s === steps.length) {
s = 0;
@@ -920,23 +892,21 @@ React.render(React.createElement(MyForm, null), container);})()var cs = this.state.currentStep;
- return (<form className='my-step-form'>
- <div>当前正在执行第{cs + 1}步</div>
- <div className='my-step-container'><Steps>
- {steps.map(function(s, i) {
- return <Steps.Step
- key={i}
- status={cs === i ? 'process' : (cs > i ? 'finish' : 'wait')}
- title={s.title}
- ></Steps.Step>
- })}
- </Steps></div>
- <div><span className='ant-btn' onClick={this.nextStep}>下一步</span></div>
- </form>)
+ return (
+ <div>
+ <div>当前正在执行第 {cs + 1} 步</div>
+ <Steps current={cs}>
+ {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
+ </Steps>
+ <div>
+ <button className='ant-btn' onClick={this.next}>下一步</button>
+ </div>
+ </div>
+ );
}
});
-React.render(<MyForm></MyForm>, container);
+React.render(<App />, container);
@@ -955,63 +925,48 @@ var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '又一个待运行',
description: '这里是信息的描述'
}].map(function (s, i) {
- return React.createElement(Step, {
- key: i,
- status: s.status,
- title: s.title,
- description: s.description });
+ return React.createElement(Step, { key: i, title: s.title, description: s.description });
});
React.render(React.createElement(
Steps,
- { direction: 'vertical' },
+ { direction: 'vertical', current: 1 },
steps
), container);})()var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '又一个待运行',
description: '这里是信息的描述'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}
- description={s.description}></Step>
+ return (
+ <Step key={i} title={s.title} description={s.description} />
);
});
-React.render(<Steps direction='vertical'>{steps}</Steps>, container);
+React.render(<Steps direction='vertical' current={1}>{steps}</Steps>, container);
@@ -1030,55 +985,42 @@ var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical-small');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}].map(function (s, i) {
- return React.createElement(Step, {
- key: i,
- status: s.status,
- title: s.title,
- description: s.description });
+ return React.createElement(Step, { key: i, title: s.title, description: s.description });
});
React.render(React.createElement(
Steps,
- { size: 'small', direction: 'vertical' },
+ { size: 'small', direction: 'vertical', current: 1 },
steps
), container);})()var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-vertical-small');
var steps = [{
- status: 'finish',
title: '已完成',
description: '这里是信息的描述'
}, {
- status: 'process',
title: '进行中',
description: '这里是信息的描述'
}, {
- status: 'wait',
title: '待运行',
description: '这里是信息的描述'
}].map(function(s, i) {
- return (<Step
- key={i}
- status={s.status}
- title={s.title}
- description={s.description}></Step>
+ return (
+ <Step key={i} title={s.title} description={s.description} />
);
});
-React.render(<Steps size='small' direction='vertical'>{steps}</Steps>, container);
+React.render(<Steps size='small' direction='vertical' current={1}>{steps}</Steps>, container);
@@ -1087,6 +1029,74 @@ React.render(<Steps 简单的竖直方向的小型步骤条。
+
+
+
+ var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-status');
+
+var steps = [{
+ status: 'finish',
+ title: '已完成',
+ description: '这里是多信息的描述啊'
+}, {
+ status: 'process',
+ title: '进行中',
+ description: '这里是多信息的耶哦耶哦哦耶哦耶'
+}, {
+ status: 'wait',
+ title: '又一个待运行',
+ description: '描述啊描述啊'
+}, {
+ status: 'wait',
+ title: '待运行',
+ description: '这里是多信息的描述啊'
+}].map(function(s, i) {
+ return (
+ <Step key={i} title={s.title} status={s.status} description={s.description} />
+ );
+});
+
+React.render(<Steps>{steps}</Steps>, container);
+
+
+
+ 自定义状态
+
+ 可以使用 status 定义每个步骤的状态。
+
+
diff --git a/components/steps/index.jsx b/components/steps/index.jsx
index 76e667cec..35a634a3b 100644
--- a/components/steps/index.jsx
+++ b/components/steps/index.jsx
@@ -7,15 +7,21 @@ const AntSteps = React.createClass({
prefixCls: 'ant-steps',
iconPrefix: 'ant',
size: 'default',
- maxDescriptionWidth: 100
+ maxDescriptionWidth: 100,
+ current: 0
};
},
render() {
+ let maxDescriptionWidth = this.props.maxDescriptionWidth;
+ if (this.props.direction === 'vertical') {
+ maxDescriptionWidth = 'auto';
+ }
return (
{this.props.children}
diff --git a/components/switch/index.html b/components/switch/index.html
index 058756edc..0fa150d2a 100644
--- a/components/switch/index.html
+++ b/components/switch/index.html
@@ -13,7 +13,7 @@ Switch 开关 - Ant Design
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
-
上图所示缓动函数：红 Linear，蓝 ease-in-out。
出入动画
不要做单向动画，进场后不做出场，直接消失元素或回到原点，会造成整体效果不协调和用户视觉上的闪现或其它不好的效果。
所以有动画的进场必须要有动画的出场，包括导航上的动画。
-
上图所示缓动函数：红 ease-in-out，蓝 ease-in-out-cubic。
场外出入
场外出入需要考虑力量与引力的关系，如向空中抛物体时，物体的初速度是最快的。
@@ -372,14 +356,6 @@ mask:false,exposure:"top"});
所以最高点前后都有一定缓冲带，曲线呈现抛物线的规律。不要做图示红色球体下降时的缓动。
-
上图所示缓动函数：红 ease-out ease-out，蓝 ease-out-cubic ease-in-cubic。
示例组件：Message 全局提示，Dropdown 下拉菜单。
@@ -394,16 +370,8 @@ mask:true,exposure:"bottom"});
慎用 Bounce 或 Elastic，这两种适用在特殊元素下，一般 back 即可满足页面上元素的弹动;
-
-
-
+
+
上图所示缓动函数：绿 easeOutBounce easeOutElastic（css 需自配）， 蓝 ease-out-back ease-in-back。
缓动函数
Ant Design 提供了一套缓动函数规范动画行为供组件使用。
diff --git a/spec/font.html b/spec/font.html
index 12093dfb0..c354d5283 100644
--- a/spec/font.html
+++ b/spec/font.html
@@ -13,7 +13,7 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/spec/pattern.html b/spec/pattern.html
index 872bc25d2..960c31436 100644
--- a/spec/pattern.html
+++ b/spec/pattern.html
@@ -13,7 +13,7 @@
-
+
-
+
-
+
-
+
-
+