I am learning polymer. Want to link paper-button, but doesn't work. where is the mistake?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-button>flat button</paper-button>
</body>
</html>
You code is working with a proper bower configuration. Here is the single module I installed, I guess this is your problem:
bower install Polymer/paper-elements
This is documented in the guide Using elements of the Polymer project.
Check here. it is working.
I make it using following way. I think your imported links are not loading.
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.min.js?20150316"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-button/paper-button.html">
<body>
<paper-button>flat button</paper-button>
</body>
Related
I've been trying to use the polymer CDN , polygit on plunker but i can't even render a single polymer element. In the folowing plunk and code link i tried rendering a paper-tab and paper-button. Please can someone show me what i'm doing wrong. thanks.
https://plnkr.co/edit/z0y06qu4LdfpxhcpYyn7?p=preview
...
<head>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
` <link rel="import" href="paper-material/paper-material.html">
<link href="paper-button/paper-button.html" rel="import">
<link href="paper-tabs/paper-tabs.html" rel="import">
</head>
<body unresolved>
<paper-button raised>New</paper-button>
<paper-tabs>
<paper-tab>Color</paper-tab>
<paper-tab>Code</paper-tab>
<paper-tab>Mark</paper-tab>
</paper-tabs>
</body>
...
Changing protocol to https will solve you issue.
<base href="https://polygit.org/polymer+:master/components/">
I'm trying to import libraries to my .html file.
It's not working when I try to use npm, bower, tags, #import.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3" />
<title>yummyTea</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/bootstrap.css">
<link rel="stylesheet" style="css/text" href="css/bootstrap.css">
</head>
<body>
<h1 class='container'>Bootstrap</h1>
<style>
#import url('css/bootstrap.css');
</style>
<script src="js/bootstrap.js"></script>
</body>
</html>
^The libraries are not rendering on my server.
I've tried multiple solutions, and it's come to the point where I just want to get this working asap.
Yes, npm and bower were both installed/init correctly into the app.
I'm going to be using CDN since they work as of right now.
You seem to be missing a <script src="js/bootstrap.js"></script> tag.
Also, your CSS #import directive is inside a <script> tag, not a <style> tag.
I have trouble with Polymer. I wanna use it in my PhoneGap project, but on the start, I met a problem. The simple paper-button is not rendering. Even in a browser, not only on device. I will grateful for the help and for some tutorials about using polymer.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer-mini.html">
<link rel="import" href="bower_components/paper-button">
</head>
<body>
<p>Hello World!!!</p>
<paper-button>GO</paper-button>
</body>
</html>
The import of your paper-button is incorrect, you should use:
<link rel="import" href="bower_components/paper-button/paper-button.html">
How to create the simplest possible html page which uses Polymer Paper Elements?
I would like to have a single html file which loads all reqired libraries from elsewhere (CDN). Example:
<!DOCTYPE html>
<html>
<head>
<title>Polymer Test</title>
</head>
<body>
<paper-button>hello world paper button</paper-button>
</body>
</html>
This obviously does not work, because <paper-button> is not known to browsers. So what do I have to include to make it work on all current browsers?
Is it possible without downloading any libraries myself and having to place them on my webserver beside my html file?
You can use Polygit a CDN like tools for Polymer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Simple</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<paper-button raised> Hello World!</paper-button>
</body>
</html>
Here is codepen with polygit, you can fork kit
Trying to display hello world using elements but nothing happens any help?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body unresolved>
<hello-world></hello-world>
</body>
</html>
hello-world.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" nonscript>
<template>
<h2>Hello World</h2>
</template>
</polymer-element>
Code for "hello-world.html" is now:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer ({ is: "hello-world", });
</script>
</dom-module>
If you are using polymer version 0.8 or 0.9, then <polymer-element ... should be <dom-module ...
See more from polymer site:
https://www.polymer-project.org/0.9/docs/start/quick-tour.html
You have a typo, nonscript needs to be noscript.
<polymer-element name="hello-world" noscript>
I have the same problem and dont find the mistake.
index.html
<html>
<head>
<title>Polymer-Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- file is available, auto completed by api -->
<link rel="import" href="hello/hello.html">
<!-- file is available, auto completed by api -->
<!-- netbeans doesn't know relation import -->
</head>
<body>
<h1>My first Polymer-Application</h1>
<hello></hello>
</body>
</html>
hello/hello.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- file is available, auto complete by api -->
<polymer-element name="hello" noscript>
<template>
<h1>Hello Polymer world</h1>
</template>
</polymer-element>
My platfrom is:
Win 8.1
nodejs
bower
polymer (installed over bower, folders and files are availible)
git
netbeans dev edition (as editor)
xammp (as apache webserver)
tested with chrome, firefox and ie10 and the custom element is not be shown. i don't think it's a browser problem. it's the simpliest element you can write, but why did it not work?
Edit:
tested it on a clean ubuntu installation. and it still does not work?
i also tested original code from the polymer page and this won't work too.
am i to stupid for copy paste?
Edit 2:
i found it an have running my polymer apps. If i use Polymer 1.0.9 i should not read the tutorial for 0.5.0
changes:
index.html:
<!DOCTYPE html>
<html>
<head>
...
<script scr="bower_components/webcomponents-lite.min.js"></script>
<!-- the lite edition is needet since polymer version 0.8 -->
<link rel="import" href="hello/hello.html">
...
</head>
<body>
<hello></hello>
</body>
</html>
hello/hello.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello">
<!-- its not longer a polymer-element. we have to use dom-module and id and the noscript option is not longer supported -->
<template>
<template>
<script>
// everytime you need to initialize a Polymer object
Polymer({
is: 'hello' // must be set now
});
</script>
</dom-module>
if you want to work with parameters you need to set it in the polymer ready function and every placeholder must be surrounded by a html tag like span without any other content in it.
Replace the line
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
with
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
This should fix the issue.