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>
Related
I am building a Polymer3 music app, which fetches playlists from public api. All the playlistNames are implemented as routerLinks.
On clicking, the playlistName is getting bold, but on page reload the routerLink is not highlighted(bold).
For example: If i am entering localhost:8081/playlist1 in URL, then playlist1 should be bold, on page reload.
Thanks in advance.
static get template() {
return html `
<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
</app-route>
<app-drawer-layout fullbleed="" narrow="{{narrow}}">
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<template is="dom-repeat" items="[[playlists]]">
<a name="[[item.name]]" href="[[rootPath]][[item.name ]]">[[item.name]]</a>
</template>
</iron-selector>
</app-drawer>
`;
}
On clicking, the playlistName is getting bold, but on page reload the
routerLink is not highlighted(bold).
This happens probably because of IronSelectableBehaviour present in the iron-selector element, which I believe applies the bold style on-tap. This also happens for paper-tabs for example.
So, the bold style is being applied because you're tapping the item. However, if you go to a page directly through the URL, you didn't actually click the item, that's why you're not getting the same behaviour.
Solution:
You will always have the class iron-selected on the current active item, whether through URL or on tap.
From the documentation:
iron-selector is not styled. Use the iron-selected CSS class to style
the selected element.
Try it out
<style>
.iron-selected {
background: #eee;
}
</style>
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 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>
I'm using Polymer Starter Kit as a base for an app.
So, this is a single page app with routing to specific section.
My index is basically unchanged, you can see it here https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html.
Now I have my custom element here
<dom-module id="lista-contatti">
<template>
<iron-ajax url="../../api/get_contacts.php" last-response="{{data}}" auto></iron-ajax>
<iron-list items="{{data}}" as="item" id="list">
<template>
<paper-icon-item>
<avatar class$="[[item.classe]]" item-icon></avatar>
<paper-item-body two-line>
<div><span>[[item.nome]]</span> <span>[[item.cognome]]</span></div>
<div secondary><span>[[item.tipo]]</span></div>
</paper-item-body>
</paper-icon-item>
</template>
</iron-list>
</template>
</dom-module>
This works because if I give a fit class to my iron-list I can see my list populating. The only problem is that my list will render under my main app header (and that makes sense because of the fit layout given to my list).
Also, the list works great with header if I put it on a single html file, as you can see in iron-list official demo pages.
Now I want to keep my list in an external dom-module, but I need it to work seamlessly with other elements of the page in the single page app scenario of the polymer starter kit.
EDIT: this is my index.html one page app layout
<body>
<template is="dom-bind" id="app">
<paper-drawer-panel>
<paper-scroll-header-panel drawer fixed>
<paper-toolbar> ... </paper-toolbar>
<paper-menu> ... </paper-menu>
</paper-scroll-header-panel>
<paper-scroll-header-panel main condenses keep-condensed-header>
<paper-toolbar> ... </paper-toolbar>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="foo"> ... </section>
<section data-route="contact">
<!-- HERE IS MY DOM-MODULE -->
<lista-contatti></lista-contatti>
</section>
</iron-pages>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
</body>
My iron-list does not work as expected with paper-scroll-header-panel because it is nested inside many elements like iron-pages, section and my custom dom-module. The list can't interact with the header height and doesn't scroll seamlessly with it.
In earlier versions of polymer you had to bind your list's scrollTarget to header panel's scroller. There is a slide about this in a Polymer 0.5 video #11:58. In which case the updated code in Polymer 1.0 might look something like:
<paper-scroll-header-panel id="hPanel" main condenses keep-condensed-header>
<iron-list id="list" items="{{data}}" as="item" >
...
</iron-list>
</paper-scroll-header-panel>
script:
document.querySelector("#list").scrollTarget = document.querySelector("#hPanel").scroller;
NB: I haven't tested this yet but figured it might help to point you in the right direction for now.
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