In this tag:
<paper-item noink="true"> Some text </paper-item>
How does noink="true" affect the behavior of the paper-item tag?
The noink attribute in Polymer disables the ripple effect that you see on click.
This isn't unique to <paper-items>, but rather can be applied to any Polymer elements:
<paper-button noink>No Ink<paper-button>
<paper-tabs noink>No Ink<paper-tabs>
Note that the ="true" is not necessary; simply providing the attribute will make it true by default.
Related
I have a polymer 1 application that used paper-menu and paper-submenu. I am rewriting it in Polymer 3. What is the general consensus for its replacement? I have searched for this and have found nothing. It would be good if the documentation for paper-menu and paper-submenu showed its replacement.
You can refer MWC-Menu for polymer 3 support link here
I replaced paper-menu and paper-submenu with the Polymer 3 elements vaadin-accordion and paper-listbox
<vaadin-accordion>
<template is="dom-repeat" items="{{sources}}">
<vaadin-accordion-panel theme="filled">
<div slot="summary">[[item.name]]</div>
<paper-listbox>
<template is="dom-repeat" items="{{item.models}}">
<paper-item on-tap="selectModel">[[item.name]]</paper-item>
</template>
</paper-listbox>
</vaadin-accordion-panel>
</template>
</vaadin-accordion>
We can set iron-icon as prefix to paper-input like this
<paper-input label="username" id="inputWithButton">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
<paper-icon-button suffix onclick="clearInput()" icon="clear" alt="clear" title="clear"></paper-icon-button>
</paper-input>
How to place this in paper-automplete?
I tried this but not working
<paper-autocomplete id="styled" min-length="1" source="{{data}}" placeholder="Search" disable-show-clear alwaysFloatLabel>
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
<paper-icon-button suffix onclick="clearInput()" icon="clear" alt="clear" title="clear"></paper-icon-button>
</paper-autocomplete>
Thanks in advance :)
paper-autocomplete is not from Polymer developers. So it's not supporting prefix and postfix. As i am looking into source code, they don't really support it in any way. Also they already defined suffix as some kind of delete button.
https://github.com/ellipticaljs/paper-autocomplete/blob/master/paper-autocomplete.html
You have an option to edit their code ( i have no idea how about license ) or just make workaround with css positioning
I'm using a conditional template to distribute content that is passed into the element. If the condition is true, it will show the first content element, otherwise the second. I noticed that when I update the condition the already distributed content is not updated. Once it is visible it will remain visible.
My first attempt looked like this:
<template is="dom-if" if="{{test}}">
<content select=".first">
</content>
</template>
<template is="dom-if" if="{{!test}}">
<content select=".second">
</content>
</template>
I noticed that it will work, if the content is wrapped in another element.
<template is="dom-if" if="{{test}}">
<div>
<content select=".first">
</content>
</div>
</template>
<template is="dom-if" if="{{!test}}">
<div>
<content select=".second">
</content>
</div>
</template>
I've created a plunker that demonstrates both cases.
Is there an explanation for this behaviour? Is it on purpose or a bug?
This is actually per design. Here`s what the Polymer team had to say on the issue on Github.
Hiding a <content> has no effect on the visibility of its distributed children (per spec), so your options are to wrap the content with a wrapper element that can be hidden (and will hide the distributed children), or use restamp which will pull the <content> out of the DOM all together.
It is slightly unintuitive that the restamp and non-restamp setups work differently, however it is a result of the non-restamp behavior which hides rather than destroying DOM as a performance optimization.
I'm having problems interacting with a selectable list of paper-item objects. The on-tap (or on-click) function is only firing when I click the iron-icon within the item, but the rest of the cell is unresponsive. I'm currently displaying the items within a paper-menu, but I've tried using iron-selector which yields the same behavior.
<paper-menu selected="{{selected}}">
<paper-item on-tap="_onItemTap" role="menuitem">
<iron-icon icon="cloud-done"></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary class="second-item-line">Complete</div>
</paper-item-body>
</paper-item>
(... other items)
</paper-menu>
The paper-menu is nested within a neon-animated-pages element and a paper-card element. I don't know if that's affecting its behavior at all.
Am I missing anything? Is there a way to make the entire paper-item clickable that I just haven't implemented? Or could other elements be interfering?
Update:
Upon further digging, I've found that my list of 'paper-item' elements works perfectly if I remove it from the context of the paper-card element. The moment I put the list inside a card, it masks the selectable area somehow (but the iron-icon is still exposed). Is there any way to expose the entire paper-item element to selection in this context? If not, I'll have to redesign my UI to not use paper-card.
I figured it out. Silly bug, really. Because my list was not inside a div with class="card-content", the paper-item elements weren't showing on the top layer of the card, becoming unusable. Adding a div with that class around my content solved my issue. Here's how the code turned out:
<paper-card>
<div class="card-content">
<iron-selector selected="{{selected}}">
<paper-icon-item on-tap="_onItemTap">
<iron-icon icon="cloud-done" item-icon></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary>Complete</div>
</paper-item-body>
</paper-icon-item>
<!-- other items -->
</iron-selector>
</div>
</paper-card>
When defining an insertion point for light DOM in WebComponents, is there any difference between these two syntaxes?
<template id="my-element">
<content></content>
</template>
and
<template id="my-element">
<content/>
</template>
What's the right or the best way to define the tag?
I tested both syntaxes in Firefox/Chrome and they behave identically (at least in a simple test).
Look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content :
Tag omission: None, both the starting and ending tag are mandatory.