diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md new file mode 100644 index 0000000000000000000000000000000000000000..6351d5828ff17061b654911d7103dbac01b06f69 --- /dev/null +++ b/components/steps/demo/vertical-small.md @@ -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 ( + ); +}); + +React.render({steps}, container); +```` diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md index d5d4468a564f6942e329753b27222b51415bc0c0..7110630d92f5d11bca16f49e19d24be43a98cacf 100644 --- a/components/steps/demo/vertical.md +++ b/components/steps/demo/vertical.md @@ -2,7 +2,7 @@ - order: 4 -简单的步骤条。 +简单的竖直方向的步骤条。 --- @@ -36,5 +36,5 @@ var steps = [{ ); }); -React.render({steps}, container); +React.render({steps}, container); ```` diff --git a/components/steps/index.jsx b/components/steps/index.jsx index c1076db8a8fa97efeb884fb5bd62bebfe3805462..4411d86ef8c5fe7512e071bbfbdabdee5871438b 100644 --- a/components/steps/index.jsx +++ b/components/steps/index.jsx @@ -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 ( + prefixCls={stepsCls}> {this.props.children} ); } diff --git a/components/steps/index.md b/components/steps/index.md index 7e7c592a839305f222ff12d823d4d1e067a0b081..b09cea9122aff269a1577386aa9c7c295f22bc9f 100644 --- a/components/steps/index.md +++ b/components/steps/index.md @@ -30,6 +30,7 @@ | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| | size | 可选参数，指定大小（目前只支持普通和迷你两种大小）。 | string | small, default | default | +| direction | 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。 | string | vertical, default | default | | maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 | ### Steps.Step diff --git a/style/components/steps.less b/style/components/steps.less index b21c319b778f21712950191e0dc1b59442d95296..85f66f118f0c2ac98b16bf5de516feacf4d36dfe 100644 --- a/style/components/steps.less +++ b/style/components/steps.less @@ -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; + } + } + } } \ No newline at end of file