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>
Related
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.
I'm new to Polymer. I have a paper-header-panel in that drawer i have add a paper-menu and paper-submenu elements everything is working properly but whenever i click on paper-item content i have to close drawer automatically after placing paper-drawer-toggle its doesn't work?(please find the code below)
In that code click on the 'Main' option drawer automatically hides. For remaining options the paper-drawer-toggle doesn't working.
Can anyone help me to solve these issue
Thank You
<a paper-drawer-toggle>Main</a>
<paper-menu attr-for-item-title="label" class="side-nav" multi>
<a paper-drawer-toggle>Home</a>
<paper-submenu label="paper-menu">
<paper-item class="menu-trigger">Reports</paper-item>
<paper-menu class="menu-content sublist side-nav" multi>
<paper-item>Profit</paper-item>
<paper-item>High</paper-item>
</paper-menu>
</paper-submenu>
</paper-menu>
I am using something like this:
<neon-animated-pages class="flex" selected="{{route}}" attr-for-selected="data-route" on-iron-select="_pageChanged" on-neon-animation-finish="_onNeonAnimationFinish">
<sys-neonpage1 data-route="home" id="page1" class="fit"></sys-neonpage1>
<sys-neonpage2 data-route="users" id="page2" class="fit"></sys-neonpage2>
<sys-elemento data-route="contact" id="page3" class="fit"></sys-elemento>
</neon-animated-pages>
That works fine, with the animations inside >sys-neonpage1...> But inside that element I have other elements which have some animations, what i want to do is that the animation of the element inside also run, but in this case it doesnt work, only the animations of works.
for exmaple inside I have something like this:
dom-module id="sys-neonpage1">
<template>
<sys-elemento class="prueba"></sys-elemento>
</template>
And the element has his own animations that never started if i use it inside ...
is that posible?, thanks a lot.
What you want to do is actually built-in the neon-animated-pages component: Running animations encapsulated in children nodes
In general, i recommend you read the whole "using neon-animations" guide as it is well written.
On my cell phone, paper-ripple fires when I touch the element, rather than something is selected.
I've noticed this is also the same behavior when using the element catalog paper ripple demo on my cell phone. However, this is not the same behavior on the google design site which uses paper ripple but not polymer.
For touch screens- How can I make the paper-ripple behavior like the google design site where the ripple only fires when something is selected rather than touched?
<template is="dom-if" if="{{show}}">
<section class="relative enabled-hover"
data-name="portfolio"
on-tap="jumpToPage">
<div class="vertical layout">
<div>
<div>
<h2 class="section-title">Portfolio</h2>
</div>
<br>
<br>
<div class="layout horizontal center-center">
<iron-icon class="big" icon="build"></iron-icon>
<iron-icon class="big" icon="cloud-circle"></iron-icon>
<iron-icon class="big" icon="http"></iron-icon>
</div>
</div>
</div>
<paper-ripple
fit
id="ripple"
initial-opacity="0.95"
opacity-decay-velocity="0.98"
hidden$="{{hideRipple}}">
</paper-ripple>
The ripple is meant to be visual feedback to the user on an interaction. The elements catalog demo shows the ripple when a selection is made on the menu items. If you want to turn the ripple off on buttons and fabs, I believe all support the noink attribute.
If you just want the icons to ripple, try https://elements.polymer-project.org/elements/paper-icon-button instead of iron-icon, and remove the paper-ripple.
I started with
<core-tooltip label="{{editor.userEditor.username}}"
position="left">
<paper-icon-button id="accountbutton" icon="account-circle"
halign="right">
</paper-icon-button>
</core-tooltip>
which is pretty textbook and works fine.
Now I want the icon button to be a menu instead so I changed it to
<core-tooltip label="{{editor.userEditor.username}}"
position="left">
<paper-menu-button id="accountbutton" icon="account-circle"
halign="right">
<paper-item label="Logout {{editor.userEditor.username}}">
</paper-item>
</paper-menu-button>
</core-tooltip>
Problem is (somewhat unsurprisingly maybe in hindsight) the tooltip is open when the menu is open to. Obviously that is undesirable.
How do I avoid that?
See jsbin.com/saziziwixu