Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
39e2d9a3
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,发现更多精彩内容 >>
提交
39e2d9a3
编写于
6月 25, 2015
作者:
羽
羽航
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add demos
上级
a35e62db
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
157 addition
and
27 deletion
+157
-27
components/steps/demo/custom-icon.md
components/steps/demo/custom-icon.md
+34
-1
components/steps/demo/small-size.md
components/steps/demo/small-size.md
+34
-1
components/steps/demo/step-next.md
components/steps/demo/step-next.md
+63
-0
components/steps/index.md
components/steps/index.md
+1
-0
style/components/steps.less
style/components/steps.less
+25
-25
未找到文件。
components/steps/demo/custom-icon.md
浏览文件 @
39e2d9a3
...
...
@@ -4,6 +4,39 @@
通过设置
`Steps.Step`
的
`icon`
属性,可以启用自定义图标。
---
````
css
.my-step-icon
{
width
:
35px
;
height
:
35px
;
font-size
:
35px
;
line-height
:
1
;
position
:
relative
;
top
:
-9px
;
}
.my-step-icon
>
img
{
width
:
45px
;
height
:
45px
;
}
````
````
jsx
'
use strict
'
;
var
Steps
=
antd
.
Steps
;
var
container
=
document
.
getElementById
(
'
components-steps-demo-custom-icon
'
);
var
imgIcon
=
<
div
className
=
'my-step-icon'
><
img
src
=
'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'
/></
div
>
React
.
render
(
<
Steps
>
<
Steps
.
Step
status
=
'finish'
title
=
'步骤1'
icon
=
{
<
div
className
=
'my-step-icon'
><
span
className
=
'anticon anticon-cloud'
></
span
></
div
>
}
></
Steps
.
Step
>
<
Steps
.
Step
status
=
'process'
title
=
'步骤2'
icon
=
{
imgIcon
}
></
Steps
.
Step
>
<
Steps
.
Step
status
=
'wait'
title
=
'步骤3'
icon
=
{
<
div
className
=
'my-step-icon'
><
span
className
=
'anticon anticon-github'
></
span
></
div
>
}
></
Steps
.
Step
>
</
Steps
>,
container
);
````
\ No newline at end of file
````
components/steps/demo/small-size.md
浏览文件 @
39e2d9a3
...
...
@@ -2,8 +2,41 @@
-
order: 1
迷你版的步进条,通过设置
`<Steps size='small'>`
启用
迷你版的步进条,通过设置
`<Steps size='small'>`
启用.
---
````
jsx
'
use strict
'
;
var
Steps
=
antd
.
Steps
;
var
container
=
document
.
getElementById
(
'
components-steps-demo-small-size
'
);
var
steps
=
[{
status
:
'
finish
'
,
title
:
'
已完成
'
},
{
status
:
'
process
'
,
title
:
'
进行中
'
},
{
status
:
'
wait
'
,
title
:
'
待运行
'
},
{
status
:
'
wait
'
,
title
:
'
待运行
'
}].
map
(
function
(
s
,
i
)
{
return
(<
Steps
.
Step
key
=
{
i
}
status
=
{
s
.
status
}
title
=
{
s
.
title
}
></
Steps
.
Step
>
);
});
React
.
render
(
<
Steps
size
=
"small"
>
{
steps
}
</
Steps
>,
container
);
````
\ No newline at end of file
components/steps/demo/step-next.md
浏览文件 @
39e2d9a3
...
...
@@ -2,7 +2,70 @@
-
order: 3
---
````
css
.my-step-form
{
width
:
100%
;
}
.my-step-form
>
div
{
margin-bottom
:
20px
;
}
.my-step-container
{
width
:
100%
;
}
````
````
jsx
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
MyForm
=
React
.
createClass
({
getInitialState
()
{
return
{
currentStep
:
Math
.
floor
(
Math
.
random
()
*
steps
.
length
)
}
},
nextStep
()
{
var
s
=
this
.
state
.
currentStep
+
1
;
if
(
s
===
steps
.
length
)
{
s
=
0
;
}
this
.
setState
({
currentStep
:
s
});
},
render
()
{
var
cs
=
this
.
state
.
currentStep
;
return
(<
form
className
=
'my-step-form'
>
<
div
>
这个demo随机生成3~6个步骤,初始随机进行到其中一个步骤
</
div
>
<
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
>
表单输入A:
<
input
/></
div
>
<
div
>
表单输入B:
<
input
/></
div
>
<
div
>
表单输入C:
<
input
/></
div
>
<
div
><
span
className
=
'ant-btn'
onClick
=
{
this
.
nextStep
}
>
下一步
</
span
></
div
>
</
form
>)
}
});
React
.
render
(<
MyForm
></
MyForm
>,
container
);
````
\ No newline at end of file
components/steps/index.md
浏览文件 @
39e2d9a3
...
...
@@ -3,6 +3,7 @@
-
category: Components
-
chinese: 步进条
-
order: 8
-
cols: 1
---
...
...
style/components/steps.less
浏览文件 @
39e2d9a3
...
...
@@ -20,10 +20,7 @@
.rc-steps-head {
border-color: @wait-color;
background-color: #fff;
&.rc-steps-custom {
background: none;
border: 0;
}
> .rc-steps-icon {
color: @wait-color;
}
...
...
@@ -33,10 +30,7 @@
.rc-steps-head {
border-color: @active-color;
background-color: @active-color;
&.rc-steps-custom {
background: none;
border: 0;
}
> .rc-steps-icon {
color: #fff;
}
...
...
@@ -46,19 +40,22 @@
.rc-steps-head {
border-color: @active-color;
background-color: #fff;
&.rc-steps-custom {
background: none;
border: 0;
}
> .rc-steps-icon {
color: @active-color;
}
}
//.rc-steps-tail {
// > i {
// background: @active-color;
// }
//}
}
&.rc-steps-custom {
.rc-steps-head {
background: none;
border: 0;
}
&.rc-steps-status-process {
.rc-steps-title {
color: @active-color;
}
}
}
}
...
...
@@ -81,8 +78,9 @@
.transition(border-color 0.1s ease);
> .rc-steps-icon {
line-height: 1;
display: inline-block;
vertical-align:
inherit
;
vertical-align:
text-top
;
color: #3fc7fa;
position: relative;
}
...
...
@@ -104,7 +102,7 @@
.rc-steps-tail {
width: 0;
position: relative;
top: 1
3
px;
top: 1
2
px;
padding:0 10px;
> i {
display: inline-block;
...
...
@@ -115,7 +113,6 @@
}
}
&.rc-steps-small {
.rc-steps-head {
border:1px solid @wait-color;
...
...
@@ -127,9 +124,6 @@
font-size: 10px;
margin-right: 10px;
> .rc-steps-icon {
top: 0;
}
}
.rc-steps-main {
max-width: 75px;
...
...
@@ -146,7 +140,7 @@
color: #999;
}
.rc-steps-tail {
top:
9
px;
top:
8
px;
padding:0 8px;
> i {
height: 1px;
...
...
@@ -156,7 +150,13 @@
}
}
&.rc-steps-small .rc-steps-head.rc-steps-custom, .rc-steps-head.rc-steps-custom {
&.rc-steps-init, &.rc-steps-init.rc-steps-small {
.rc-steps-tail {
padding: 0;
}
}
&.rc-steps-small .rc-steps-item.rc-steps-custom .rc-steps-head, .rc-steps-item.rc-steps-custom .rc-steps-head {
width: inherit;
height: inherit;
line-height: inherit;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录