Question

我在网页组件中使用了聚合物纸 - 旋转器：

<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>

问题出在哪里？

非常感谢帮助。

Answer 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>

聚合物纸 - 旋转器通过类与数据绑定改变颜色

1 个答案: