The following code works fine in Chrome and Firefox but in IE I have to click a tab twice to get the tab to change or respond to the click. I'm thinking it may have something to do with creating paper-tabs in the template. Is there a workaround to get this to function correctly in IE? I'm running 0.51.
<paper-tabs id="papertabs" selected="{{selected}}">
<paper-tab name="all">All</paper-tab>
<template id="papertabstemplate" repeat="{{cat in categories}}">
<template if="{{ cat.group == group }}">
<paper-tab name="{{cat.category}}">{{cat.category}}</paper-tab>
</template>
</template>
</paper-tabs>
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>
I'm looking for a better optimized solution to have too many if's in Polymer 2.0. For example i'm building a table object, where each cell can be text, buttons, links, objects, ect. I want the user to be able to enter a 2D array and have the Polymer 2.0 object be able to pick which markup to use. My current solution (below) simple has several if statements, but this means that every cell if going to call each statement. Is there a a better way to handle this?
<template is="dom-if" if="[[matchCellType(cell, 'button')]]">
<UI-Button id='[[cell.button.ID]]' class$='[[cell.button.class]]'>[[cell.button.text]]</UI-Button>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'object')]]">
<span class="object-toggle"></span>[[cell.title]]
<div class="properties">
<template is="dom-repeat" items="[[getProps(cell)]]">
<div class="properties_row"><div class="properties_cell"><b>[[item.title]]:</b></div><div style="display: table-cell">[[item.val]]</div></div>
</template>
</div>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'link')]]">
<a target="_blank" href='[[cell.link.href]]'>[[cell.link.text]]</a>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'cell')]]">
[[cell]]
</template>
<template is="dom-if" if="[[matchCellType(cell, 'textArea')]]">
<ui-text-area rows="[[cell.textArea.rows]]" cols="[[cell.textArea.cols]]" id='[[cell.textArea.id]]' class$='[[cell.textArea.class]]' text= [[cell.textArea.text]]></ui-text-area>
</template>
Lots of calls to matchCellType don't harm if it isn't a costly computation (if it were, you could update a property in an observer and test on the property instead)
Factor out the series of ifs into a component so you don't clutter up your table
As an alternative to using dom-ifs, compute an attribute or style class from the cell, render all elements always, and use CSS to have only the matching elements be visible. This produces much more DOM elements, but may still be more performant because browsers handle hidden or display:none elements very efficiently
Instead of stamping with several dom-ifs, you could create and remove nodes imperatively
I am using the example code for two drawers found here.
<app-drawer-layout>
<app-drawer swipe-open></app-drawer>
<app-drawer id="endDrawer" align="end" swipe-open></app-drawer>
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title></div>
<paper-icon-button icon="info" onclick="document.getElementById('endDrawer').toggle();"></paper-icon-button>
</app-toolbar>
<sample-content size="100"></sample-content>
</app-drawer-layout>
This works if I put the code on in index.html but If I put it inside a component, and then reference the component in index.html, I get the following error:
Uncaught TypeError: Cannot read property 'toggle' of null
Can anyone please shed some light on this?
Note: This error happens in Chrome but not Safari. Haven't tested anything else.
This happens because inside a component code the document.getElementById will not work as expected. Do you have Shadow DOM enabled by any chance?
You should use Polymer's event binding syntax and get the element using the node finding feature.
<dom-module id="my-app">
</template>
<paper-icon-button icon="info" on-tap="toggleEndDrawer"></paper-icon-button>
</template>
</dom-module>
<script>
Polymer({
is: 'my-app',
toggleEndDrawer: function() {
this.$.endDrawer.toggle();
}
</script>
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 using the polymer core-pages and core-menu elements.
And I wan to know if I am implementing it right.
My page is simple and looks like this:
<core-menu selected="0" selected="{{selected}}">
<core-item label="Organization"></core-item>
<core-item label="Bank Setup"></core-item>
</core-header-panel>
<span tool class="tabAdminPolymer_title"></span>
<core-pages class="sss" selected="{{selected}}">
<div class="pages">
Hi there content1!
</div>
</core-pages>
Using Java Script on menu click event I am changing the content of the class .page
My content is backbone controls that renders using obj.render js function.
Your implementation is sound but there are some simple errors which are breaking it. Please try the following corrections.
You're using the "selected" attribute twice:
<core-menu selected="0" selected="{{selected}}">
to
<core-menu selected="{{selected}}">
You're closing the wrong tag:
</core-header-panel>
to
</core-menu>
That's it. Code works otherwise.