聚合物纸波纹

Polymer paper ripple

本文关键字：聚合物      更新时间：2023-09-26

我想改变一个元素的颜色，当一个按钮被按下。我希望当按钮被按下并且颜色发生变化时，在该元素中触发纸张涟漪效应。

我该怎么做呢?

目标元素:

<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-toolbar旁边添加paper-ripple元素，并在paper-button s上调用mousedown/mouseup时手动调用downAction/upAction。

<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();
 }

看看这个活塞

我不完全确定您在这里要做什么，但是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属性

相关文章：