问题描述:

i try to hide several polymer elements on a certain element condition. I'm aware that there are several possibilities. In my opinon the easiest way to do this is to introduce a new CSS class

.invisible {

display: none;

}

and add it to the class list of the polymer elements

this.$.icon.classList.add('invisible');

this.$.text.classList.add('invisible');

this.$.button.classList.add('invisible');

But this has no effect on the elements. The elements are still visible. A look into the elment inspector shows, that the class was added:

class="style-scope parent-elem invisible"

Where parent-elem is the name of the parent element.

Can anyone explain me why the element will not be hidden?

Thank you

Best Regards,

Meisenmann

网友答案:

you can easly manipulate on your elements with parent property. Try in your element properties add property

properties: {
 ...
 elementsVisible: {
  type: Boolean,
  value: true
 }
 ...
}

then in your method manipulate this property and in html component set

<element hidden="[[!elementsVisible]]" ></element>

ps. if this wont work you can add in parent css

[hidden] {
  display: none;
 }

sometimes polymer elements need special mixins to customize their css, but hidden usually works :)

相关阅读:
Top