Polymer 1.0：如何在 <paper-tab> 元素中设置 <paper-ripple> 颜色的样式？

Question

我有一个元素，我们称它为x-foo。在 x-foo 中，我使用 <paper-tabs>.

问题

How do I change the <paper-tabs> ripple color from (the default) yellow to white?

条形颜色暴露。但不是波纹颜色。

Here is the documentation I followed to change the bar color. The problem is that the element documentation at the bottom of this page不以同样的方式解释或暴露波纹颜色

代码

这是我目前所做的工作。我试过的方法不起作用。

:host {
  --paper-tabs-selection-bar-color: var(--default-primary-color); /* Works */
  --paper-ripple-color: white; /* Does not work */
}

Answer 1

你可以使用/deep/组合器来刺穿阴影DOM，结合#ink到select波纹颜色。

这是一个带有白色波纹的示例：https://jsbin.com/jiqebamire/edit?html,output

Answer 2

我给你的建议是经常检查 element 的源代码，然后你可以看到它的结构:)在那里你可以找到 css var 来设置 "ripple"效果颜色。 变量名称是 --paper-tab-ink 您可以看到 css var here

的参考

polymer polymer1.0 paper-tabs

Answer 3

这是对我有用的方法。

<style>
  :host {
    --paper-tab-ink: var(--accent-color);
  }
  paper-tabs {
    --paper-tabs-selection-bar-color: var(--accent-color);
  }
</style>