Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
be3a90fb
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,发现更多精彩内容 >>
提交
be3a90fb
编写于
2月 18, 2016
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add click effect for primary button, close #942
上级
a567faea
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
32 addition
and
2 deletion
+32
-2
components/button/button.jsx
components/button/button.jsx
+10
-2
style/components/button.less
style/components/button.less
+22
-0
未找到文件。
components/button/button.jsx
浏览文件 @
be3a90fb
...
...
@@ -30,9 +30,17 @@ export default class Button extends React.Component {
window
.
PIE
.
attach
(
findDOMNode
(
this
));
}
}
handleClick
()
{
const
buttonNode
=
findDOMNode
(
this
);
buttonNode
.
className
=
buttonNode
.
className
.
replace
(
`
${
prefix
}
clicked`
,
''
);
setTimeout
(()
=>
{
buttonNode
.
className
+=
`
${
prefix
}
clicked`
;
},
10
);
this
.
props
.
onClick
();
}
render
()
{
const
props
=
this
.
props
;
const
{
type
,
shape
,
size
,
onClick
,
className
,
htmlType
,
children
,
...
others
}
=
props
;
const
{
type
,
shape
,
size
,
className
,
htmlType
,
children
,
...
others
}
=
props
;
// large => lg
// small => sm
...
...
@@ -53,7 +61,7 @@ export default class Button extends React.Component {
const
kids
=
React
.
Children
.
map
(
children
,
insertSpace
);
return
(
<
button
{
...
others
}
type
=
{
htmlType
||
'
button
'
}
className
=
{
classes
}
onClick
=
{
onClick
}
>
<
button
{
...
others
}
type
=
{
htmlType
||
'
button
'
}
className
=
{
classes
}
onClick
=
{
this
.
handleClick
.
bind
(
this
)
}
>
{
kids
}
</
button
>
);
...
...
style/components/button.less
浏览文件 @
be3a90fb
...
...
@@ -97,4 +97,26 @@
> span + .@{iconfont-css-prefix} {
margin-left: 0.5em;
}
&-clicked:before {
content: '';
position: absolute;
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
border-radius: inherit;
z-index: -1;
background: inherit;
opacity: 1;
transform: scale3d(0.5, 0.5, 1);
animation: buttonEffect 0.48s ease forwards;
}
}
@keyframes buttonEffect {
to {
opacity: 0;
transform: scale3d(1, 1, 1);
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录