在 Polymer 中动态隐藏纸标签

Question

需要根据用户点击隐藏元素。尝试设置 hidden$="{{hideme}}" 并使用 this.$.xxx.hideme=true 更改 hideme 也正如在少数讨论中提到的那样，将 hidden$="{{hideme()}}" 更改为函数返回值。但是两者都没有用。设置隐藏属性的正确方法是什么？

Answer 1

hidden$="{{hideme}} 和 hidden$="{{hideme()}}" 是正确的并且都会设置 hidden 属性，假设 hideme 属性和 hideme() 函数是都在宿主元素中定义。

例如，如果 <x-foo> 元素包含：

<paper-tabs hidden$="{{hideme}}">

...那么您可以通过将 <x-foo>.hideme 设置为 true 来隐藏 <paper-tabs> 元素。

注意在 Polymer 2 中，您显然需要在宿主元素的样式中定义自己的 [hidden] CSS 规则：

<dom-module id="x=foo">
  <template>
    <style>
      [hidden] {
        display: none;
      }
    </style>
    ...

Hiding paper-tabs dynamically in Polymer