CODEWITHSUNDEEP
dartdart-polymer
SanMadJack
SanMadJack

Reputation: 388

conditional CSS in dart polymer

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.

Upvotes: 2

Views: 433

Answers (3)

montyr75
montyr75

Reputation: 941

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.

Upvotes: 3

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

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

Upvotes: 1

Pixel Elephant
Pixel Elephant

Reputation: 21383

You can use conditional CSS like this:

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

Upvotes: 2

Related Questions