[英]Polymer 1.0 - Binding CSS Class with property
I try to bind a CSS Class to a paper-progress
with the value of my property for change the item's color. 我尝试将CSS类绑定到带有my属性值的
paper-progress
,以更改项目的颜色。 I base my code on the Polymer's example on GitHub and the documentation of Data-binding. 我将我的代码基于GitHub上的Polymer示例和数据绑定文档。
Here my code: http://jsbin.com/bidebe/10/edit?html,output 这是我的代码: http : //jsbin.com/bidebe/10/edit?html,output
The class of the paper-progress
changes correctly, but the color doesn't. paper-progress
的类正确地改变,但颜色没有。 If I put the class color directly, the color is correct. 如果我直接输入类颜色,颜色是正确的。
So I don't understand why my paper-progress
has the good class but doesn't apply it. 所以我不明白为什么我的
paper-progress
有良好的课程但不适用。 If someone can help me to understand that, thanks. 如果有人能帮我理解,谢谢。
This maybe will help you. 这可能会对你有所帮助。
attached: function () {
this.async(function () {
var paperProgressArray = this.querySelectorAll('paper-progress');//get all paper-progress
var i = 0;
var j = paperProgressArray.length;
var color;
var secundary;
var paperProgress;
var dificulty;
while (i < j) {
paperProgress = paperProgressArray[i];
dificulty = paperProgress.value;
if (0 <= dificulty && dificulty <= 4) {
color = 'red';
secundary = "green";
} else if (4 < dificulty && dificulty <= 7) {
color = 'green';
secundary = "red";
} else if (7 < dificulty && dificulty <= 10) {
color = 'yellow';
secundary = "green";
}
//set and update colors
paperProgress.customStyle['--paper-progress-active-color'] = color;
paperProgress.customStyle['--paper-progress-secondary-color'] = secundary;
this.updateStyles();
i++;
}
});
},
我认为这解释了当前的行为,并为您提供了一些其他方法来实现您的目标(Flavio的解决方案可能接近您需要做的事情) https://www.polymer-project.org/1.0/docs/devguide/styling的.html#自定义属性-垫片---局限性和-API的细节
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.