Jorge Hernandez Jorge Hernandez - 9 months ago 238
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?


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: