[英]In Polymer can I make a dynamically created paper-button change color when I click it?
I am trying to change the color of a paper-button that is created dynamically through the <template is="dom-repeat">
element. 我正在尝试更改通过
<template is="dom-repeat">
元素动态创建的纸质按钮的颜色。 Let's say I have this piece of code: 假设我有这段代码:
<template is="dom-repeat" items="{{items}}" as="item">
Itemnumber: [[item.number]] is [[item.height]].
<paper-button on-click="setHigh">High</paper-button>
<paper-button on-click="setLow">Low</paper-button>
</template>
Now when I click the button "High" for example, I want the background-color of that button to change and I want to background-color of the "Low" button to change as well. 现在,例如,当我单击按钮“高”时,我想要更改该按钮的背景颜色,并且也希望更改“低”按钮的背景颜色。 The Array items is stored locally and I have been able to do something similar to this using this code:
Array项存储在本地,并且我可以使用以下代码执行类似的操作:
<template is="dom-repeat" items="{{items}}" as="item">
Itemnumber [[item.number]] is [[item.height]].
<template is="dom-if" if="[[isHigh(item)]]">
<paper-button on-click="setHigh" class="active">High</paper-button>
<paper-button on-click="setLow">Low</paper-button>
</template>
<template is="dom-if" if="[[!isHigh(item)]]">
<paper-button on-click="setHigh">High</paper-button>
<paper-button on-click="setLow" class="active">Low</paper-button>
</template>
</template>
Now every Item that returns isHigh(item) as true will be part of class active (which I use to style the background-color), and false will not be part of that class. 现在,每个将isHigh(item)返回为true的Item都将是活动类的一部分(我用来设置背景颜色的样式),而false将不属于该类的一部分。 This works when I first load the page, however when I press the buttons and the Items array changes, I have to first reload the page for the styles to take effect.
这在我第一次加载页面时有效,但是当我按下按钮并且Items数组发生更改时,我必须首先重新加载页面才能使样式生效。 The attribute item.height DOES update immediately.
属性item.height会立即更新。
I would suggest adding a container around the two buttons on which you add a class which colors the buttons. 我建议在两个按钮周围添加一个容器,在该容器上添加一个为按钮着色的类。 Doing this with css is a lot lighter for your application, since it doesn't need to call getHigh when the buttons are pressed.
使用CSS进行此操作对您的应用程序要轻得多,因为在按下按钮时不需要调用getHigh。
<template is="dom-repeat" items="{{items}}" as="item">
<div class="button-container">
Itemnumber [[item.number]] is [[item.height]].
<paper-button on-click="setHigh" class="high">High</paper-button>
<paper-button on-click="setLow" class="low">Low</paper-button>
</div>
</template>
Then make the functions add and remove a class on the div around them 然后使函数在其周围的div上添加和删除一个类
setHigh(e) {
e.currentTarget.classList.add("high")
}
setLow(e) {
e.currentTarget.classList.remove("high")
}
And in your css: 并在您的CSS中:
.button-container .high {
background-color: green;
}
.button-container .low {
background-color: red;
}
/* When high is pressed */
.button-container.high .high {
background-color: red;
}
.button-container.high .low {
background-color: green;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.