Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set class name dynamically?

I have understood from my last question here that string concatenate is not allowed with 0.9 and above (currently I am migrating to version 1.0).

I have to rather wrap every variable inside separate HTML element.

However there are times when I need to use a href or class attribute to be assigned with values dynamically. I cannot make it to work directly like the following:

<a href="http://example.com/user/{{userid}}">Link text</a>

since 1.0 won't allow string concatenation!

Please see the snippets below. I am trying to pass an attribute value from my index.html which in turn should replace the value in class attribute inside my custom element. But it is not working and I understand why.

<dom-module id="multi-color-bar-chart">
  <template>
    <div id="chart">
          <p>{{title}}</p>
          <div class="{{v1bg}}">
              <!-- I want {{v1bg}} to be replaced by value sent from index.html -->
              <span>{{value1}}</span>%
          </div>
          <div class="v2" style="background:#ffcc00;">
              <span>{{value2}}</span>%
          </div>
          <div class="v3" style="background:#369925;">
              <span>{{value3}}</span>%
          </div>
          <div class="clear"></div>
      </div>
      <div class="clear"></div>
  </template>
  <script>
      (function () {
          Polymer({
              is: 'multi-color-bar-chart', //registration of element
              properties: {
                  title: { type: String },
                  value1: { type: String },
                  value2: { type: String },
                  value3: { type: String },
                  v1bg: { type: String }
              }
          });
      })();
  </script>
</dom-module>

Here is the snippet in index.html

<multi-color-bar-chart
  title="Annual"
  value1="45.5"
  value2="22.3"
  value3="32.2"
  v1bg="#ff0000">
  ...
  ...
</multi-color-bar-chart>

I am passing a hex code #ff0000 via v1bg attribute which I intend to actually replace the property inside the element.

I don't know yet if there is a work around to it. Might have used document.querySelector() but didn't try that yet. If there is a direct HTML approach that would be wonderful.

like image 369
Subrata Sarkar Avatar asked Jun 05 '15 13:06

Subrata Sarkar


People also ask

How can I change the dynamic name of a class in HTML?

Adding a dynamic class name is as simple as adding the prop :class="classname" to your component. Whatever classname evaluates to will be the class name that is added to your component.

How do I add a class dynamically?

To do that, first we create a class and assign it to HTML elements on which we want to apply CSS property. We can use className and classList property in JavaScript. Approach: The className property used to add a class in JavaScript.

How do you select a dynamic class in CSS?

Use another CSS class selector *="class" (equivalent to CSS attribute selector) which select all elements whose class contains at least one substring "box-".


1 Answers

Try class$="{{v1bg}}", as this will bind to the class attribute rather than the class property.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding

like image 62
Zikes Avatar answered Oct 23 '22 12:10

Zikes