Polymer paper-spinner 通过类与数据绑定改变颜色答案

【问题标题】：Polymer paper-spinner change color through class with data-bindingPolymer paper-spinner 通过类与数据绑定改变颜色
【发布时间】：2015-12-03 09:29:41
【问题描述】：

我在我的网络组件中使用了一个聚合物制纸器：

<dom-module id="custom-spinner">
  <style include = 'custom-spinner-styles'>

    paper-spinner.yellow{
      --paper-spinner-layer-1-color: yellow;
      --paper-spinner-layer-2-color: yellow;
      --paper-spinner-layer-3-color: yellow;
      --paper-spinner-layer-4-color: yellow;
    }

  </style>

  <template> 
    <div class = "loader">
      <paper-spinner class$="{{color}}"></paper-spinner>
    </div>

    <content>
    </content>
  </template>

</dom-module>

<script>
  etc....
</script>

我是这样使用的：

<custom-spinner color = "yellow" size = "200px" fade-in-sp = "500" fade-out-sp = "400"></custom-spinner>

现在的问题是，数据绑定工作正常，并且 paper-spinners 类设置为黄色，但未应用样式。

如果我直接设置'yellow'，它会完美运行：

<paper-spinner class="yellow"></paper-spinner>

有什么想法吗？

我们将不胜感激。

【问题讨论】：

我的例子对你有帮助吗？
@PascalGula 你好，Pascal 我还没有尝试过（还有很多其他事情要做），我会在这个周末尝试并给你反馈。

标签： data-binding styles polymer web-component

【解决方案1】：

我在我的gold-password-input 中使用数据绑定进行样式设置，它的工作原理如下：

  .None {
    color: var(--gold-password-input-strength-meter-none-color, --paper-grey-700) !important;
  }
  .VeryWeak {
    color: var(--gold-password-input-strength-meter-veryweak-color, --paper-red-700) !important;
  }
  .Weak {
    color: var(--gold-password-input-strength-meter-weak-color, --paper-orange-700) !important;
  }
  .Medium {
    color: var(--gold-password-input-strength-meter-medium-color, --paper-yellow-700) !important;
  }
  .Strong {
    color: var(--gold-password-input-strength-meter-strong-color, --paper-blue-700) !important;
  }
  .VeryStrong {
    color: var(--gold-password-input-strength-meter-verystrong-color, --paper-green-700) !important;
  }

和

<span id="strengthLabel">
  [[strengthMeterLabels.Label]]:
  <span class$=[[_strengthMeterScore]]>[[_computeStrengthMeterLabel(_strengthMeterScore)]]</span>
  <paper-icon-button icon="info" alt="info" disabled noink></paper-icon-button>
</span>

【讨论】：