Question

我正在试图弄清楚如何根据相同的变量获得两个元素的可见性。包含元素不是一种选择，因为我需要在它们不可见时与元素交互。我尝试了这个，我找到了某个地方的例子，但它没有用，两个元素总是可见的：

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

我尝试将CSS包装在模板条件中，但这也导致两个元素始终可见：

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

我是不是错了？我正在使用Dart 1.7.2和Polymer 0.15.1 + 5.

Answer 1

就个人而言，我会使用hidden属性，如下所示：

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

和

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

Polymer包含查找hidden属性存在的CSS并应用适当的CSS。 ?=语法根据布尔表达式删除并应用属性。

Answer 2

您可以使用这样的条件CSS：

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

Answer 3

根据https://github.com/Polymer/polymer/issues/270中的讨论，最佳支持方式（跨浏览器）是使用<core-style>元素https://www.polymer-project.org/docs/elements/core-elements.html#core-style

dart聚合物中的条件CSS

3 个答案: