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

Question

我有一个元素，我们称之为x-foo。在x-foo内，我正在使用<paper-tabs>。

问题

  

如何将<paper-tabs>涟漪颜色从（默认）yellow更改为white ？

露出酒吧颜色。但不是波纹颜色。

Here is the documentation I followed to change the bar color。问题是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

这对我有用。

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

Answer 2

我的提示是始终检查element的源代码然后你可以看到它的结构:)在那里你可以找到css var来设置“涟漪”效果颜色。 var名称为--paper-tab-ink 您可以看到css var here

的参考

polymer polymer1.0 paper-tabs

Answer 3

您可以使用/deep/组合器来刺穿阴影DOM，并结合#ink选择纹波颜色。

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