I am starting to use Polymer 1.0: the only thing I tried is a simple template like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"></link>
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" hidden="{{!star}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name:String,
star:Boolean
}
});
</script>
<pres-test name="withStar" star>
<h1>Example1:</h1>
<img src="http://placekitten.com/g/200/180" alt="image"></img>
</pres-test>
<pres-test name="withoutStar">
<h2>Example:</h2>
<img src="http://placesheen.com/100/100"></img>
<p>No star icon :()</p>
</pres-test>
</body>
</html>
This code works fine on Chrome and Opera, except that even if I don't put the boolean star in pres-test, it still shows the star.
In Firefox and IE, it just shows the h1 and img in the pres-test.
In Safari it seems that it doesn't understand the tags like dom-module, template or pres-test, since it first displays what is in the dom-module, then what is in pres-test, without adapting to the variables.
I looked for the compatibility of Polymer, but I only found it for the version 0.5.
Am I doing something wrong, or is it just not compatible with these browsers?
Only Chrome supports having custom element definitions inline in your main document. Other browsers currently do not have full and proper implementations of the new and upcoming standard.
Take the pres-test element definition and move it into its own HTML file, then import it.
Also, you only need to import one of the webcomponents.js polyfills - and for Polymer 1.0, you'll want to use webcomponents-lite.js.
All said and done you'll have two files:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="pres-test.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<pres-test name="withStar" star>
<h1>Example1:</h1>
<img src="http://placekitten.com/g/200/180" alt="image"></img>
</pres-test>
<pres-test name="withoutStar">
<h2>Example:</h2>
<img src="http://placesheen.com/100/100"></img>
<p>No star icon :()</p>
</pres-test>
</body>
</html>
pres-test.html:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/iron-icons/iron-icons.html">
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" style$="{{getStarStyle(star)}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name: {
type: String
},
star: {
type: Boolean,
value: false
}
},
getStarStyle: function(star) {
return star ? '' : 'display: none';
}
});
</script>
Related
The below code works properly in this jsbin but it does not work in either this codepen, this plunker or this jsfiddle.
Why not? How can I get it to work in the three locations where it does not?
http://jsbin.com/yudavucola/1/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Since every other site other than jsbin is using the secure version of HTTP i.e. HTTPS, the request to get the contents from the source http://polygit.org/polymer+:master/components/ is blocked. So, use secure connection and it will work in every other site.
You can check the console for more information.
Change <base> tag's href attribute from http://polygit.org/... to //polygit.org/.... This normalizes the import to work in both http and https environments.
Here are working examples in all repositories: JsBin, Codepen, Plunker and JsFiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Edit
Note that for a specific version of Polymer, you can use
<base href="//polygit.org/polymer2.0+:master/components/">
or
<base href="//polygit.org/polymer1.0+:master/components/">
etc.
I am trying out sample code provided by Google at https://www.polymer-project.org/1.0/start/first-element/intro.
This is what I have so far:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="/my_components/icon-toggle-demo.html" rel="import">
</head>
<body>
<icon-toggle-demo toggle-icon="star"></icon-toggle-demo>
</body>
</html>
icon-toggle-demo.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icons/iron-icons.html">
<link rel="import" href="icon-toggle.html">
<dom-module id="icon-toggle-demo">
<template>
<style>
:host {
font-family: sans-serif;
};
</style>
<h3>Statically-configured icon-toggles</h3>
<icon-toggle toggle-icon="star"></icon-toggle>
<icon-toggle toggle-icon="star" pressed></icon-toggle>
<h3>Data-bound icon-toggle</h3>
<!-- use a computed binding to generate the message -->
<div><span>[[message(isFav)]]</span></div>
<!-- curly brackets ({{}}} allow two-way binding -->
<icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>
</template>
<script>
Polymer({
is: "icon-toggle-demo",
message: function(fav) {
if (fav) {
return "You really like me!";
} else {
return "Do you like me?";
}
}
});
</script>
</dom-module>
icon-toggle.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html">
<dom-module id="icon-toggle">
<template>
<style>
/* local DOM styles go here */
:host {
display: inline-block;
}
iron-icon {
fill: rgba(0,0,0,0);
stroke: currentcolor;
}
:host([pressed]) iron-icon {
fill: currentcolor;
}
</style>
<!-- local DOM goes here -->
<!-- <span>Not much here yet.</span> -->
<!-- <iron-icon icon="polymer"> -->
<iron-icon icon="[[toggleIcon]]">
</iron-icon>
</template>
<script>
Polymer({
is: 'icon-toggle',
properties: {
toggleIcon: String,
pressed: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true
}
},
listeners: {
'tap': 'toggle'
},
toggle: function() {
this.pressed = !this.pressed;
}
});
</script>
</dom-module>
The code works fine in chrome but I get following error in FF:
TypeError: document.registerElement is not a function
I have already included the polyfill. Something else missing?
You're doing nothing wrong. The following line in your index.html file defaults to the newest version (v1.0.0-rc.1) of the webcomponents polyfill.
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
There appears to be a bug in the current version for Firefox. The same error can also be observed in the Plunker that is linked in the Polymer docs here. This will hopefully be fixed by the Polymer team.
To fix it for now, you can explicitly use an older version. For example.
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.24/webcomponents-lite.js"></script>
WebComponents v1.0.0+ should only be used with Polymer 2.0. Use version ^0.7.24 with Polymer 1.
Is there a way to use an icon from the Font Awesome library as the icon inside a paper-icon-button?
Here is my jsBin.
http://jsbin.com/rahesepeho/2/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
</style>
<template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Per #Stefanvott on the Polymer Slack site:
There are at least two ways:
Use the following custom element https://customelements.io/philya/font-awesome-polymer-icons/ (Didn't work for me.)
Do this <paper-icon-button src="" class="fa fa-github-alt fa-lg"></paper-icon-button> per this jsBin. See below code.
Short version http://jsbin.com/hubonatopa/1/edit?html,output
paper-icon-button.fa {
padding: .5em;
height: 2em;
width: 2em;
}
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
Full version http://jsbin.com/hubonatopa/1/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> </head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
paper-icon-button.fa {
padding: 10px;
line-height: 1em;
overflow: hidden;
}
</style> <template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
You can use this project! It's cool, bower package to use in polymer 1-2. Now it's last version of FA: 4.7. Here: https://github.com/vangware/fontawesome-iconset
in my case, on polymer v1.8 i had to create a custom style element as described in this link , paste font-awesome css there and then add it to my element using
<template>
<style include="shared-styles">
</style>
<paper-button> <i class="fa fa-facebook fa-lg"></i></paper-button>
..............
</template>
http://jsbin.com/mefonoqanu/1/edit?html,output
This JSBin doesn't render its contents. It does not display:
its header section — the <paper-toolbar> text (i.e., "Header") or
its content panel section — the <div> element (i.e., "Content goes here...").
What am I doing wrong? Please provide a working JSBin example.
Note: Per this link, <paper-header-panel> requires host to have a height.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar>Header</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
http://jsbin.com/kabede/5/edit?html,output
The changes:
webcomponents from rawgit instead of bower_components
<span class="title"> to make header visible
style="width:100%; height: 100%;" on element to see its content
Code of accepted answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="http://element-party.xyz/">
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element style="width:100%; height: 100%;"></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar ><span class="title">Header</span></paper-toolbar>
<div >
Content goes here...<br>
</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</html>
Here is the minimum markup necessary to answer the question:
http://jsbin.com/jocinasovo/edit?html,output
Changes
Added style using :host
Only need height not width
No need to switch from bower_components (per this link) to rawgit CDN
No need for .flex class on <paper-header-panel>
Note: Per this link, <paper-header-panel> requires host to have a height.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
:host {
height: 100%
}
</style>
<paper-header-panel>
<paper-toolbar><span>Header</span></paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
I can't seem to get <paper-tooltip> element to work for me.
Here is my JSBin.
What am I doing wrong?
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<style></style>
<div class="with-tooltip" tabindex="0">
<input type="checkbox">Oxygen
<paper-tooltip>Atomic number: 8</paper-tooltip>
</div>
<paper-icon-button id="heart" icon="favorite" alt="heart"></paper-icon-button>
<paper-icon-button id="back" icon="arrow-back" alt="go back"></paper-icon-button>
<paper-icon-button id="fwd" icon="arrow-forward" alt="go forward"></paper-icon-button>
<paper-tooltip for="heart" margin-top="0"><3 <3 <3 </paper-tooltip>
<paper-tooltip for="back" margin-top="0">halp I am trapped in a tooltip</paper-tooltip>
<paper-tooltip for="fwd" margin-top="0">back to the future</paper-tooltip>
</template>
<script>
// only need this when both (1) in the main document and
// (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-foo"
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Summary from comments:
Per #kevinashcraft:
You have to import paper-icon-button, iron-icons, and paper-tooltip. Here's a working JSBin.