聚合物纸波纹 [英] Polymer paper ripple
本文介绍了聚合物纸波纹的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在按下按钮时更改元素的颜色. 我希望在按下按钮并更改颜色时在该元素中触发纸张波纹效果.
I am trying to change the color of an element when a button is pressed. I want a paper ripple effect to be triggered in that element when the button is pressed and the color changes.
我应该怎么做?
目标元素:
<paper-toolbar class="abc">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div flex class="indent title">Heading</div>
</paper-toolbar>
触发元素:
<paper-button class="def background-blue"></paper-button>
<paper-button class="def background-red"></paper-button>
Javascript:
Javascript:
$(".def").click(function(){
$(".abc").css("background-color", $(this).css("background-color"));
});
推荐答案
不是直接在paper-toolbar
上操作样式,而是一种 element 方法是在您的代码旁边添加paper-ripple
元素paper-toolbar
并在paper-button
上调用mousedown
/mouseup
时手动调用downAction
/upAction
.
Instead of manipulating styles directly on the paper-toolbar
, a more element approach is to add a paper-ripple
element next to your paper-toolbar
and manually call downAction
/upAction
when mousedown
/mouseup
is invoked on your paper-button
s.
<paper-header-panel class="fit">
<paper-toolbar class="toolbar">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div flex class="indent title">Heading</div>
<paper-ripple id="ripple" center></paper-ripple>
</paper-toolbar>
<div>
<paper-button class="def background-blue"raised on-mousedown="_onMousedown" on-mouseup="_onMouseup">Go blue</paper-button>
<paper-button class="def background-red" raised on-mousedown="_onMousedown" on-mouseup="_onMouseup">Go red</paper-button>
</div>
</paper-header-panel>
请注意,paper-ripple
的背景色是color
.
_assignColor: function(e) {
var button = Polymer.dom(e).localTarget;
var ripple = this.$.ripple;
$(ripple).css("color", $(button).css("background-color"));
// or without jQuery
//var buttonStyle = getComputedStyle(button, null);
//ripple.style.color = buttonStyle.backgroundColor;
},
_onMousedown: function (e) {
this._assignColor(e);
this.$.ripple.downAction({x: e.x, y: e.y});
},
_onMouseup: function (e) {
this._assignColor(e);
this.$.ripple.upAction();
}
看看这个 plunker .
这篇关于聚合物纸波纹的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文