Say I've got one polymer app test-app, one regular div div-a, and one polymer element page-a.
Now I'm trying to build a animated-pages, which contains div-a and page-a
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../page-a/page-a.html">
<polymer-element name="test-app" flex vertical layout>
<template>
<core-animated-pages
selected="{{selected}}"
transitions="cross-fade"
>
<section name="div-a">
<div cross-fade>
<span>div-a</span>
</div>
</section>
<section name="page-a">
<page-a cross-fade></page-a>
</section>
</core-animated-pages>
</template>
<script src="./test-app.js"></script>
</polymer-element>
The problem is: when performing the transition, the animation on div-a works fine, but the one on page-a doesnot work. Instead of fading in, the page-a just suddenly appears.
Another strange point is: if I change transitions="cross-fade" into transitions="cross-fade-all", and remove other cross-fade defined on div and page-a, both transitions work find.
Any idea?
Cross-fade doesn't work directly on elements that have overflow: hidden set.
Related
Summary
I'm working on a Polymer project based off the Polymer starter kit, and I ran into a problem where icons from the default icon set aren't appearing. Their size and style is calculated correctly, but there's no SVG within the tag when I use inspect element. I've tried icons from maps and social which all work, but the ones from icons just don't have an image.
I've tried various different solutions:
Following this Stack Overflow question here, I did the accepted solution with no results.
I deleted all of my Polymer components and did a fresh bower install + bower update. Still no go.
I saw somewhere that the Polymer Starter Kit has a conflict with the my-icons.html file, so I renamed it to custom-icons.html. This also didn't work.
This is very confusing and frustrating because the problem seemed to pop up out of nowhere. One day the default iron-icons were working, and the next they weren't.
My imports
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-localstorage/iron-localstorage.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="app-data.html">
<link rel="import" href="log-out.html">
<link rel="import" href="custom-icons.html">
Utilization
<a href="/#/home-quotes" tabindex="-1">
<paper-icon-item>
<iron-icon icon="icons:settings" item-icon></iron-icon> <!-- This doesn't work -->
Home
</paper-icon-item>
</a>
<a href="/#/secret-quotes" hidden$="[[!storedUser.loggedin]]" tabindex="-1">
<paper-icon-item>
<iron-icon icon="maps:add-location" item-icon></iron-icon> <!-- This works? -->
Secret Quotes
</paper-icon-item>
</a>
UPDATE The bug has been fixed in Polymer Starter Kit 2.1.1. Now when you run polymer init starter-kit, the generated codebase will include the fix.
I suspect the problem is a naming conflict with your iconset (Issue #934), which was recently fixed.
Before the fix, the name of the custom iconset in Polymer Starter Kit was icons, which is unfortunately also the name of the default iconset from <iron-icons>. Since your custom-icons.html import occurs after iron-icons.html, your iconset takes precedence.
The fix is to rename your custom icons to avoid the name conflict, allowing for both iconsets to coexist. That is, change the iconset's name attribute in your custom-icons.html to something like this:
<iron-iconset-svg name="my-custom-icons" size="24">
I've been playing with Polymer. I've successfully built a "hello world" app. My app includes the iron-elements. I'm now trying to integrate the paper-elements. Unfortunately, I can't seem to get them to work in my project.
I installed them via bower install PolymerElements/paper-elements. I then imported the .html similar to the way I did for the iron elements. However, the items didn't appear. So, I decided to take a step back and just do a "hello world" with the paper elements. To my surprise, I couldn't figure out how to just display a Button with Paper. Surely I'm not this dumb.
I sought out a basic app I could pull from GitHub and use. However, I didn't have any luck doing that either. Currently, I have the following:
<html>
<head>
<title>Hello</title>
<script src="res/packages/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/packages/polymer/polymer.html">
<!-- Paper Elements -->
<link rel="import" href="res/packages/font-roboto/roboto.html">
<link rel="import" href="res/packages/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/packages/paper-toolbar/paper-toolbar.html">
<link rel="import" href="res/packages/paper-button/paper-button.html">
<!-- End of Paper Elements -->
<!-- End of Polymer -->
</head>
<body unresolved>
<h1>Hello</h1>
<paper-header-panel>
<paper-button raisedButton label="button"></paper-button>
</paper-header-panel>
</body>
</html>
what am I doing wrong? Can someone either tell me what I'm missing or point me to a basic "hello world" app with Paper?
Thank you!
Remove your paper-header-panel and try this:
<paper-button raised>Raised button</paper-button>
Can't see the value inside the input and the menu has horizontal scrollbars, even with small words.
Have you experienced the same issue and found a solution?
I opened a thread on github project if anyone interested.
Here is some code I used (this code is a part of a larger module and I use webcomponents.js to make it work):
<dom-module id="test-form">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<template>
<paper-dropdown-menu label="Center">
<paper-menu class="dropdown-content">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: "test-form"
});
</script>
</dom-module>
[Edited to remove parts about wc being supported by polymer on IE10, since accepted answer changed]
Your component name must include a dash.
Polymer is based on http://webcomponents.org/. You can see that IE and Safari do not support it. EDGE will probably support it, but don't hold your breath.
Hi all I am trying to create a custom Polymer Element that uses the < x-flipbox > element inside its template tag.
However it seems that the < x-flipbox > tag it is only working on the index page and not inside my custom elements.
This is my custom element, what am I doing wrong?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipbox.html">
<polymer-element name="nautes-flipbox" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
The element above is just showing the two divs.
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
This one pasted in the index.html shows only one div (as it should).
In addition, how can I debug this kind of issues? (I am new to polymer and the console is not giving me any error/warning)
You don't need to include it as a import, that's an old wrapper thing the Polymer folks wrote for including X-Tag elements (it's probably what's complicating this). You can simply include the JS (as a <script>) and CSS (as a <link rel="stylesheet">) inside of the x-flipbox repo's src directory where you have your <link rel="import"> for the flipbox
Repo: https://github.com/x-tag/flipbox/tree/master/src
As far as I can tell from the documentation here and here, the following should be right. But it's not working. I get no errors. My page just says "test test" (You'll see why in the code). What is wrong?
NOTE I had this working fine with core-ajax directly in a single blog entry, so I know my data is fine, etc
slog-entry.html this is the element for each entry in my demo blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../core-ajax/core-ajax.html" rel="import">
<polymer-element name="slog-entry" noscript>
<template>
<h1>{{entry.Title}}</h1>
<p>{{entry.Text}}</p>
<span>{{entry.timestamp}}</span>
</template>
</polymer-element>
slog-entries.html this is the element for the collection of entries in my blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../slog-entry/slog-entry.html" rel="import">
<polymer-element name="slog-entries" noscript>
<template>
<core-ajax auto
url="https://<server>/entries.json"
response="{{entries}}">
</core-ajax>
test
<template repeat="{{entry in entries}}">
<slog-entry bind="{{entry}}"></slog-entry>
</template>
</template>
</polymer-element>
slog.html this is the index
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Status Log 0.1b</title>
<script src="templates/platform/platform.js"></script>
<link href="templates/slog-entries/slog-entries.html" rel="import">
<link href="templates/polymer/polymer.html" rel="import">
</head>
<body>
test
<slog-entries></slog-entries>
</body>
</html>
UPDATE Here is what the DOM looks like:
Your syntax bind="{{entry}}" doesn't do what I suspect you want it to do.
Polymer binding uses a syntax like this <name of thing to bind to>="{{<source value>}}".
Now, in order to have a name of thing to bind to, elements must publish those names.
So, slog-entry has to look like this:
<polymer-element name="slog-entry" attributes="entry" noscript>
The attributes="entry" bit on the element causes slog-entry to accept bindings to property entry (this is what we call publishing).
Now your repeat can look like this:
<template repeat="{{entry in entries}}">
<slog-entry entry="{{entry}}"></slog-entry>
</template>
We are telling the system to bind the entry property of each slog-entry to the entry value at each repeat.