[英]Polymer paper ripple
我正在尝试在按下按钮时更改元素的颜色。 我想要在按下按钮并且颜色改变时在该元素中触发纸张波纹效果。
我该怎么做?
目标要素:
<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:
$(".def").click(function(){
$(".abc").css("background-color", $(this).css("background-color"));
});
更多的元素方法是在paper-toolbar
旁边添加paper-ripple
元素,并在paper-button
上调用mousedown
/ mouseup
时手动调用downAction
/ upAction
,而不是直接在paper-toolbar
上操作样式。
<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 。
我不完全确定你在这里要做什么,但是Polymer会为你完成大部分繁重的工作。 如果您只想设置涟漪效果的颜色,则文档建议使用选择器:
#my-button::shadow paper-ripple {
color: blue;
}
如果您想更永久地更改按钮的颜色,像toggles
属性可能会有所帮助。 (Google的演示在这里 )
HTML:
<paper-button toggles>button text</paper-button>
CSS:
#my-button[active] {
background-color: red;
}
虽然如果你想保持它的颜色,你必须设置按钮忽略进一步的点击事件,以便它保持其active
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.