Jorge Hernandez Jorge Hernandez - 1 year ago 441
CSS Question

Conditionally add css class in polymer

I have an element inside a polymer component and want to add a css class conditionally.

<div class="bottom {{completed: item.completed}}">


if item.isCompleted is true, then add the .completed class.

However, I've got the following error:

Invalid expression syntax: completed?: item.completed

I don't want to put the hole subtree inside a template conditional. Is it possible to do using an expression inside an html tag? I'm using the last polymer release, is this funtionallity migrated or replaced in any way?

Answer Source

update Polymer 1.0

<div class$="{{getClasses(item.completed)}}">
getClasses: function (completed) {
  var classes = 'bottom'
  if(completed) classes += ' completed';
  return classes;
}

original - Polymer 0.5

It should look like

<div class="bottom {{ {completed: item.completed } | tokenList }}">

See docs for more details: http://polymer-project.org/docs/polymer/expressions.html#tokenlist