Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
c85e1008
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,发现更多精彩内容 >>
提交
c85e1008
编写于
7月 08, 2015
作者:
Y
yiminghe
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add switch
上级
79414562
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
143 addition
and
2 deletion
+143
-2
components/form/demo/mix.md
components/form/demo/mix.md
+2
-1
components/switch/demo/basic.md
components/switch/demo/basic.md
+18
-0
components/switch/index.jsx
components/switch/index.jsx
+15
-0
components/switch/index.md
components/switch/index.md
+10
-0
index.js
index.js
+2
-1
package.json
package.json
+1
-0
style/components/index.less
style/components/index.less
+1
-0
style/components/switch.less
style/components/switch.less
+94
-0
未找到文件。
components/form/demo/mix.md
浏览文件 @
c85e1008
...
...
@@ -11,6 +11,7 @@ var Select = antd.Select;
var
Option
=
Select
.
Option
;
var
InputNumber
=
antd
.
InputNumber
;
var
Datepicker
=
antd
.
Datepicker
;
var
Switch
=
antd
.
Switch
;
function
handleSelectChange
(
value
)
{
...
...
@@ -44,7 +45,7 @@ React.render(
<
div
className
=
"ant-form-item"
>
<
label
for
=
""
className
=
"col-6"
required
>
Switch 开关:
</
label
>
<
div
className
=
"col-10"
>
<
p
className
=
"ant-form-text"
>
请填写 switch
</
p
>
<
Switch
/
>
</
div
>
</
div
>
<
div
className
=
"ant-form-item"
>
...
...
components/switch/demo/basic.md
0 → 100644
浏览文件 @
c85e1008
# 基本用法
-
order: 0
简单的 switch。
---
````
jsx
var
Switch
=
antd
.
Switch
;
var
container
=
document
.
getElementById
(
'
components-switch-demo-basic
'
);
function
onChange
(
checked
){
console
.
log
(
'
switch to
'
+
checked
);
}
React
.
render
(<
Switch
defaultChecked
=
{
false
}
onChange
=
{
onChange
}
/>,
container
);
````
components/switch/index.jsx
浏览文件 @
c85e1008
var
Switch
=
require
(
'
rc-switch
'
);
var
React
=
require
(
'
react
'
);
var
AntSwitch
=
React
.
createClass
({
getDefaultProps
()
{
return
{
prefixCls
:
'
ant-switch
'
};
},
render
()
{
return
<
Switch
{
...
this
.
props
}
/>;
}
});
module
.
exports
=
AntSwitch
;
components/switch/index.md
浏览文件 @
c85e1008
...
...
@@ -11,3 +11,13 @@
-
需要表示开关状态/两种状态之间的切换时;
-
和
`checkbox `
的区别是,切换
`switch`
会直接触发状态改变,而
`checkbox`
一般用于状态标记,需要和提交操作配合。
## API
### Switch
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| checked | 指定当前是否选中 | boolean | | false |
| defaultChecked | 初始是否选中 | boolean | | false |
| onChange | 变化时回调函数 | Function(checked:boolean) | | |
\ No newline at end of file
index.js
浏览文件 @
c85e1008
...
...
@@ -14,7 +14,8 @@ var antd = {
Popconfirm
:
require
(
'
./components/popconfirm
'
),
confirm
:
require
(
'
./components/modal/confirm
'
),
Steps
:
require
(
'
./components/steps
'
),
InputNumber
:
require
(
'
./components/input-number
'
)
InputNumber
:
require
(
'
./components/input-number
'
),
Switch
:
require
(
'
./components/switch
'
)
};
module
.
exports
=
antd
;
...
...
package.json
浏览文件 @
c85e1008
...
...
@@ -22,6 +22,7 @@
"
rc-progress
"
:
"
~1.0.0
"
,
"
rc-select
"
:
"
~4.0.0
"
,
"
rc-steps
"
:
"
~1.1.3
"
,
"
rc-switch
"
:
"
~1.1.0
"
,
"
rc-tabs
"
:
"
~5.1.0
"
,
"
rc-tooltip
"
:
"
~2.3.0
"
},
...
...
style/components/index.less
浏览文件 @
c85e1008
@import "button";
@import "switch";
@import "dropdown";
@import "progress";
@import "select";
...
...
style/components/switch.less
0 → 100644
浏览文件 @
c85e1008
@switchPrefixCls:ant-switch;
.@{switchPrefixCls}{
position: relative;
display: inline-block;
width: 38px;
height: 20px;
line-height: 20px;
vertical-align: middle;
border-radius: 20px 20px;
border: 1px solid #bcbcbc;
background-color: #bcbcbc;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
&:after{
display: block;
position: absolute;
top: -1px;
left: -1px;
width: 20px;
height: 20px;
border-radius: 50% 50%;
background-color: #ffffff;
content: " ";
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
transform: scale(1);
transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
animation-duration: 0.3s;
animation-name: rcSwitchOff;
}
&:hover:after{
transform: scale(1.1);
animation-name: rcSwitchOn;
}
&-checked{
border: 1px solid #64b6f7;
background-color: #64b6f7;
&:after{
left: 18px;
}
}
&-disabled{
cursor: no-drop;
&:after{
background: #9e9e9e;
animation-name: none;
cursor: no-drop;
}
&:hover:after{
transform: scale(1);
animation-name: none;
}
}
&-label {
display: inline-block;
line-height: 20px;
font-size: 14px;
padding-left: 10px;
vertical-align: middle;
white-space: normal;
pointer-events: none;
user-select: text;
}
}
@keyframes rcSwitchOn {
0% {
transform: scale(1);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1.1);
}
}
@keyframes rcSwitchOff {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录