Question

我正在尝试在按下按钮时更改元素的颜色。我想要在按下按钮并且颜色改变时在该元素中触发纸张波纹效果。

我该怎么做？

目标元素：

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

Answer 1

而不是直接在paper-toolbar上操作样式，更多元素方法是在paper-ripple旁边添加paper-toolbar元素并手动调用{{在您的downAction上调用upAction / mousedown时，1}} / mouseup。

paper-button

请注意<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

看看这个plunker。

Answer 2

我不完全确定你在这里尝试做什么，但Polymer会为你完成大部分繁重的工作。如果您只想设置涟漪效果的颜色，docs建议使用选择器：

#my-button::shadow paper-ripple {
  color: blue;
}

如果您想更永久地更改按钮的颜色，toggles属性之类的内容可能会有所帮助。（谷歌的演示是here）

HTML：

<paper-button toggles>button text</paper-button>

的CSS：

#my-button[active] {
  background-color: red;
}

虽然如果您想要保持这种颜色，您必须设置按钮以忽略更多点击事件，以便保持其active属性。

聚合物纸波纹

2 个答案: