CODEWITHSUNDEEP
javascriptcsspolymerweb-componentpolymer-1.0
RosAng
RosAng

Reputation: 1040

How to change polymer 1.0 paper-button color dynamically from an array of colors?

I have an array buttonColors, which has set of colors in the hex format. Now I want to display set of paper-button each with the color present in the buttonColors Array. How to achieve it in polymer 1.0?

<template is="dom-repeat" items="{{buttonColors}}">
      <paper-button style="background-color:{{item}}" >
                  <b>click me</b>
      </paper-button>
</template>

The above snippet does not seem to work. Kindly help.

Upvotes: 2

Views: 1547

Answers (2)

Let Me Tink About It
Let Me Tink About It

Reputation: 16112

ebidel's comment is excellent as always. (He is one of the Google geniuses responsible building Polymer BTW)

1.0 doesn't support expressions in {{}} bindings. You'll need to make it a computed property: style="{{_computeStyle(item)}}" ... Documentation

Below, I have written out some example code for you to follow.

Example Code

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

Upvotes: 1

RosAng
RosAng

Reputation: 1040

You need to create a function and call it in following way

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

Upvotes: 2

Related Questions