如何从一组颜色动态地改变聚合物1.0纸按钮的颜色
How to change polymer 1.0 paper-button color dynamically from an array of colors?
我有一个数组buttonColors,它有一组十六进制格式的颜色。现在我想显示一组纸按钮,每个按钮的颜色都在buttonColors数组中。如何在聚合物1.0中实现?
<template is="dom-repeat" items="{{buttonColors}}">
<paper-button style="background-color:{{item}}" >
<b>click me</b>
</paper-button>
</template>
上面的代码片段似乎不起作用。请帮助。
您需要创建一个函数,并以以下方式调用它
<template is="dom-repeat" items="{{buttonColors}}">
<paper-button style="{{computeStyle(item)}}" >
<b>click me</b>
</paper-button>
</template>
<script>
computedStyle:function(cl)
{
var s= "background-color:"+cl;
return s;
}
</script>
ebidel的评论一如既往地出色。(他是负责构建Polymer的Google天才之一)
1.0不支持
{{}}
绑定中的表达式。你需要让它成为一个计算属性:style="{{_computeStyle(item)}}"
…文档
下面,我写了一些示例代码供您参考。
示例代码
<dom-module id="x-element">
<template is="dom-repeat" items="{{buttonColors}}">
<paper-button style$="{{_computeStyle}}"> <b>click me</b> </paper-button>
</template> ...
<script>
(function() {
Polymer({
is: "x-element",
properties: {
value: {
type: Number,
notify: true
}
},
_computeStyle: function(item) {
// Compute style here
return "background-color:red";
}
});
})()
</script>
</dom-module>
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 高亮显示时编辑文本大小和颜色
- 用于搜索的聚合物嵌套绑定
- 用与线条相同的颜色填充多折线图上的点
- 更改使用Chart.js创建的图表中的轴线颜色
- 如何使用jquery更改html中的背景颜色
- 动态更改高图中的系列颜色
- 聚合物0.5.5:核心列表中的条件模板和/或模板动态参考
- jsf中两个字符串的颜色代码差异
- 我们如何使用css或JavaScript在i/j上更改句点(点)的颜色
- d3.hexbin插件-动态定义颜色域以适应数据
- 我如何制作一个JS函数,它可以从相似的原始颜色双向更改为某个颜色
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- jQuery动画-边框宽度和颜色
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- JS幻灯片与CSS背景颜色变化
- 用于观察的聚合物代码示例片段不会更改文本颜色
- 聚合物改变应用颜色
- 如何从一组颜色动态地改变聚合物1.0纸按钮的颜色