mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

add big vertical steps

Browse Source
This commit is contained in:
zhujun24 2015-08-26 18:28:29 +08:00
parent bdf13797cb
commit f664275a1e
3 changed files with 95 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/steps/demo/vertical.md Normal file
View File

@ -0,0 +1,40 @@
# 竖直方向的步骤条
- order: 4
简单的步骤条。
---
````jsx
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>
);
});
React.render(<Steps direction={'vertical'} maxDescriptionWidth={'300'}>{steps}</Steps>, container);
````

2
components/steps/index.jsx
View File

@ -14,7 +14,7 @@ const AntSteps = React.createClass({
return (<Steps size={this.props.size}
iconPrefix={this.props.iconPrefix}
maxDescriptionWidth={this.props.maxDescriptionWidth}
prefixCls={this.props.prefixCls}>
prefixCls={this.props.direction==='vertical' ? 'ant-steps-vertical ant-steps' : 'ant-steps'}>
{this.props.children}
</Steps>);
}

58
style/components/steps.less
View File

@ -1,5 +1,7 @@
@import "../mixins/index";
@steps-prefix-cls: ~"@{css-prefix}steps";
@steps-vertical-prefix-cls: ~"@{css-prefix}steps-vertical";
@process-icon-color: @primary-color;
@process-title-color: #666;
@ -117,7 +119,7 @@
.@{steps-prefix-cls}-head-inner {
display: block;
border:1px solid @wait-icon-color;
border: 1px solid @wait-icon-color;
width: 26px;
height: 26px;
line-height: 26px;
@ -167,7 +169,7 @@
left: 0;
width: 100%;
top: 13px;
padding:0 10px;
padding: 0 10px;
> i {
display: inline-block;
vertical-align: top;
@ -181,7 +183,7 @@
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-head-inner {
border:1px solid @wait-icon-color;
border: 1px solid @wait-icon-color;
width: 18px;
height: 18px;
line-height: 18px;
@ -209,7 +211,7 @@
}
.@{steps-prefix-cls}-tail {
top: 8px;
padding:0 8px;
padding: 0 8px;
> i {
height: 1px;
border-radius: 1px;
@ -227,3 +229,51 @@
background: none;
}
}
//vertical steps
.@{steps-prefix-cls} {
.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
display: block;
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-tail {
left: 13px;
height: 100%;
width: 1px;
top: 0;
padding: 30px 0 4px 0;
> i {
height: 100%;
width: 1px;
}
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-head-inner {
margin-right: 16px;
}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
//.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
// display: block;
//}
}