聚合物1.0 – 绑定css类

前端之家收集整理的这篇文章主要介绍了聚合物1.0 – 绑定css类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图根据json的参数来包含类,所以如果我有属性颜色,$ =使得把它作为一个类属性(基于聚合体 documentation)来传递,
<div class$="{{color}}"></div>

问题是当我试图按照现有的一组类添加该类,例如:

<div class$="avatar {{color}}"></div>

在这种情况下,$ =没有办法。有没有办法完成这个或每次我有条件地添加一个类,我必须通过CSS选择器而不是类包括其余的样式?我知道在这个例子中,颜色可能只是简单的进入风格属性,它只是一个例子来说明问题。

请注意,这只是在Polymer 1.0中的问题。

解决方法

从Polymer 1.0开始,还没有支持字符串插值(很快就会在路线图中提到)。但是,您也可以使用计算绑定来执行此操作。例
<dom-module>
  <template>
    <div class$="{{classColor(color)}}"></div>
  </template>
</dom-module>
<script>
  Polymer({
    ...
    classColor: function(color) {
      return 'avatar '+color;
    }
  });
<script>

编辑:

从Polymer 1.2开始,您可以使用复合结合​​。所以

<div class$="avatar {{color}}"></div>

现在工作。

猜你在找的CSS相关文章