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 vertical steps

Browse Source
This commit is contained in:
zhujun24 2015-08-27 13:20:31 +08:00
parent f664275a1e
commit 8a99d0bc5a
5 changed files with 125 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,40 @@
# 竖直方向的小型步骤条
- order: 5
简单的竖直方向的小型步骤条。
---
````jsx
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: '描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊述啊描述描述述描述啊描述啊描述啊描述啊描述啊'
}, {
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 size='small' direction='vertical' maxDescriptionWidth='400'>{steps}</Steps>, container);
````

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

@ -2,7 +2,7 @@
- order: 4
简单的步骤条。
简单的竖直方向的步骤条。
---
@ -36,5 +36,5 @@ var steps = [{
);
});
React.render(<Steps direction={'vertical'} maxDescriptionWidth={'300'}>{steps}</Steps>, container);
React.render(<Steps direction='vertical' maxDescriptionWidth='400'>{steps}</Steps>, container);
````

3
components/steps/index.jsx
View File

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

1
components/steps/index.md
View File

@ -30,6 +30,7 @@
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| size | 可选参数，指定大小（目前只支持普通和迷你两种大小）。 | string | small, default | default |
| direction | 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。 | string | vertical, default | default |
| maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
### Steps.Step

107
style/components/steps.less
View File

@ -2,6 +2,7 @@
@steps-prefix-cls: ~"@{css-prefix}steps";
@steps-vertical-prefix-cls: ~"@{css-prefix}steps-vertical";
@steps-vertical-small-prefix-cls: ~"@{css-prefix}steps-vertical-small";
@process-icon-color: @primary-color;
@process-title-color: #666;
@ -246,34 +247,86 @@
width: 1px;
}
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-main {
min-height: 47px;
}
.@{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;
//}
.@{steps-prefix-cls}-item.@{steps-vertical-small-prefix-cls} {
display: block;
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
left: 7px;
height: 100%;
width: 2px;
top: 0;
padding: 0;
> i {
height: 100%;
width: 0px;
}
}
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-wait {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px dotted @wait-tail-color;
}
}
}
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-process {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px dotted @process-tail-color;
}
}
}
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-finish {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px solid @finish-tail-color;
}
}
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-main {
min-height: 47px;
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
margin-right: 8px;
background-color: #2db7f5;
}
.@{steps-prefix-cls}-status-wait, .@{steps-prefix-cls}-status-process {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
text-indent: 1000px;
display: inline-block;
background-color: #fff;
}
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
width: 16px;
height: 16px;
border-width: 2px;
}
.@{steps-prefix-cls}-status-finish {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
background-color: @finish-tail-color;
}
}
.@{steps-prefix-cls}-status-finish {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-icon:before {
color: #fff;
font-weight: 700;
position: relative;
top: -3px;
}
}
}
}