Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
e0f2eb21
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e0f2eb21
编写于
9月 01, 2015
作者:
偏
偏右
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #225 from zhujun24/vertical-steps
Vertical steps
上级
d8384a37
663d3d02
变更
6
显示空白变更内容
内联
并排
Showing
6 changed file
with
212 addition
and
6 deletion
+212
-6
components/steps/demo/vertical-small.md
components/steps/demo/vertical-small.md
+36
-0
components/steps/demo/vertical.md
components/steps/demo/vertical.md
+40
-0
components/steps/index.jsx
components/steps/index.jsx
+2
-1
components/steps/index.md
components/steps/index.md
+1
-0
package.json
package.json
+1
-1
style/components/steps.less
style/components/steps.less
+132
-4
未找到文件。
components/steps/demo/vertical-small.md
0 → 100644
浏览文件 @
e0f2eb21
# 竖直方向的小型步骤条
-
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
:
'
描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊
'
}].
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'
>
{
steps
}
</
Steps
>,
container
);
````
components/steps/demo/vertical.md
0 → 100644
浏览文件 @
e0f2eb21
# 竖直方向的步骤条
-
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'
>
{
steps
}
</
Steps
>,
container
);
````
components/steps/index.jsx
浏览文件 @
e0f2eb21
...
...
@@ -12,6 +12,7 @@ const AntSteps = React.createClass({
},
render
()
{
return
(<
Steps
size
=
{
this
.
props
.
size
}
direction
=
{
this
.
props
.
direction
}
iconPrefix
=
{
this
.
props
.
iconPrefix
}
maxDescriptionWidth
=
{
this
.
props
.
maxDescriptionWidth
}
prefixCls
=
{
this
.
props
.
prefixCls
}
>
...
...
components/steps/index.md
浏览文件 @
e0f2eb21
...
...
@@ -30,6 +30,7 @@
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| size | 可选参数,指定大小(目前只支持普通和迷你两种大小)。 | string | small, default | default |
| direction | 可选参数,指定步骤条方向(目前支持水平和竖直两种方向,默认水平方向)。 | string | vertical | 无 |
| maxDescriptionWidth | 可选参数,指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
### Steps.Step
...
...
package.json
浏览文件 @
e0f2eb21
...
...
@@ -52,7 +52,7 @@
"
rc-radio
"
:
"
~2.0.0
"
,
"
rc-select
"
:
"
~4.8.5
"
,
"
rc-slider
"
:
"
~1.4.0
"
,
"
rc-steps
"
:
"
~1.
1.4
"
,
"
rc-steps
"
:
"
~1.
2.1
"
,
"
rc-switch
"
:
"
~1.2.0
"
,
"
rc-table
"
:
"
~3.1.0
"
,
"
rc-tabs
"
:
"
~5.3.2
"
,
...
...
style/components/steps.less
浏览文件 @
e0f2eb21
...
...
@@ -117,7 +117,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 +167,7 @@
left: 0;
width: 100%;
top: 13px;
padding:0 10px;
padding:
0 10px;
> i {
display: inline-block;
vertical-align: top;
...
...
@@ -181,7 +181,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 +209,7 @@
}
.@{steps-prefix-cls}-tail {
top: 8px;
padding:0 8px;
padding:
0 8px;
> i {
height: 1px;
border-radius: 1px;
...
...
@@ -227,3 +227,131 @@
background: none;
}
}
.@{steps-prefix-cls}-vertical {
.@{steps-prefix-cls}-item {
display: block;
}
.@{steps-prefix-cls}-tail {
position: absolute;
left: 13px;
top: 0;
height: 100%;
width: 1px;
padding: 30px 0 4px 0;
> i {
height: 100%;
width: 1px;
}
}
.@{steps-prefix-cls}-head {
float: left;
&-inner {
margin-right: 16px;
}
}
.@{steps-prefix-cls}-main {
max-width: 100%;
min-height: 47px;
overflow: hidden;
display: block;
.@{steps-prefix-cls}-title {
line-height: 26px;
}
.@{steps-prefix-cls}-description {
padding-bottom: 12px;
}
}
}
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item {
display: block;
}
.@{steps-prefix-cls}-tail {
position: absolute;
left: 6px;
top: 0;
height: 100%;
width: 2px;
padding: 0;
> i {
height: 100%;
width: 0px;
}
}
.@{steps-prefix-cls}-status-wait {
.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px dotted @wait-tail-color;
}
}
}
.@{steps-prefix-cls}-status-process {
.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px dotted @process-tail-color;
}
}
}
.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px solid @finish-tail-color;
}
}
}
.@{steps-prefix-cls}-main {
max-width: 100%;
min-height: 47px;
overflow: hidden;
display: block;
.@{steps-prefix-cls}-title {
line-height: 14px;
}
.@{steps-prefix-cls}-description {
padding-bottom: 12px;
}
}
.@{steps-prefix-cls}-status-wait, .@{steps-prefix-cls}-status-process {
overflow: hidden;
.@{steps-prefix-cls}-head-inner {
text-indent: 10000px;
display: inline-block;
background-color: #fff;
}
}
.@{steps-prefix-cls}-head-inner {
width: 14px;
height: 14px;
margin-right: 8px;
background-color: #2db7f5;
border-width: 2px;
}
.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-head-inner {
background-color: @finish-tail-color;
.@{steps-prefix-cls}-icon:before {
color: #fff;
font-weight: 700;
position: absolute;
top: -15px;
left: -6px;
}
}
}
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录