I can't seem to set a default selected option, if needed. Read the docs but no other properties, except for label works.
<paper-dropdown-menu label="I Love:">
<paper-menu class="dropdown-content" selectedItem="Heroes Reborn">
<paper-item>Teen Wolf</paper-item>
<paper-item>Heroes Reborn</paper-item>
<paper-item>Once Upon a Time</paper-item>
</paper-menu>
</paper-dropdown-menu>
No matter if I set a value on paper-item value="x" then <paper-menu selected="x"> nothing works. Do I need to run some other script?
Setting selected to an integer should work. If you want to select the second item set <paper-menu selected="1">.
If you want to use value instead of an integer index, set attr-for-selected="value"
<paper-menu attr-for-selected="value" selected="heroes" class="dropdown-content">
<paper-item value="teen">Teen Wolf</paper-item>
<paper-item value="heroes">Heroes Reborn</paper-item>
<paper-item value="once">Once Upon a Time</paper-item>
</paper-menu>
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>
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'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>
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