conditional CSS in dart polymer

2
votes

I'm trying to figure out how to get the visibility of two elements to toggle based on the same variable. Wrapping the elements with isn't an option, since I need to interact with the elements while they're invisible. I tried this, which I found an example of somewhere, but it didn't work, both elements are always visible:

  #fieldsList {
    display:{{ {none: editing == true, block: editing == false} | tokenList }};
  }
  #fieldsEdit {
    display:{{ {none: editing == false, block: editing == true } | tokenList}};
  }

And I tried it by wrapping the CSS in template conditionals, but this also results in both elements being always visible:

  <template if="{{ editing == true}}">
    #fieldsList {
      display: none;
    }
  </template>
  <template if="{{ editing == false}}">
    #fieldsEdit {
      display: none;
    }
  </template>

Am I going about this wrong? I'm using Dart 1.7.2 with Polymer 0.15.1+5.

3
dartdart-polymer

3 Answers

3
votes

Personally, I would use the hidden attribute, like so:

<div id="fieldsList" hidden?="{{editing}}">

and

<div id="fieldsEdit" hidden?="{{!editing}}">

Polymer includes CSS that looks for the presence of the hidden attribute and applies the appropriate CSS. The ?= syntax removes and applies the attribute based on the boolean expression.

2
votes

You can use conditional CSS like this:

#fieldsList {
  display:{{editing ? 'none' : 'block'}};
}
#fieldsEdit {
  display:{{editing ? 'block' : 'none'}};
}
1
votes

According to the discussion in https://github.com/Polymer/polymer/issues/270 the best supported way (cross-browser) is to use the <core-style> element https://www.polymer-project.org/docs/elements/core-elements.html#core-style