CODEWITHSUNDEEP
htmlcssrestpolymer
nos
nos

Reputation: 20872

how to vary font style with polymer

I am new to Polymer.js and css. What I try to achieve is to display the text in todo.item normally if todo.done is false, and display a line-throught when todo.done is true.

I am thinking of using css to do it, but not sure how to do if/else with css. The following code will add the line-through for all of them. Would css be the choice in this case, or something else should be better?

      <ol>                                                                     
        <template is="dom-repeat" items="{{ticket.todos}}" as="todo">          
          <style>                                                           
            .todo-item{                                                     
              text-decoration: line-through;                                
            }                                                               
          </style>                                                          
          <li><span class="todo-item" done="{{todo.done}}"> {{todo.item}}</span></li>
        </template>                                                            
      </ol>

Upvotes: 0

Views: 36

Answers (1)

a1626
a1626

Reputation: 2964

Here's a simple css attribute related solution for it(nothing specific to polymer but should work with polymer also)

<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    span[done] {
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <span done>Done</span>
  <br>
  <span>Not done</span>
</body>

</html>

Note: done should be binded like done$={{item.done}}. Attributes are binded using $= in Polymer.

Upvotes: 1

Related Questions