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>
Related
I created a new polymer app using AppToolbox (polymer cli) and now I'm trying to add a theme that I download from Polymer Theme. I follow the instructions:
Add the following line inside your tag
AFTER the webcomponents-lite.min.js and other HTML imports.
<link rel="import" href="path/to/theme.html">
To use the theme within your custom element, add the following line
inside your tag:
<link rel="import" href="path/to/theme.css" type="css">
Of course I removed some css styles in the example components but I don't see the template applied to the project.
Could anyone give me some advice about this?
Instructions:
TL;DR The only method that seems to allow those themes to work properly with Polymer 1.5.0 is to link the provided stylesheet in index.html with:
<link rel="stylesheet" href="path/to/theme.css">
plunker
The instructions from https://polymerthemes.com/ to import the CSS theme in your <dom-module> align with Polymer's documentation on importing external stylesheets, but the support for that import-type is deprecated in favor of style modules.
However, even style modules don't allow full theming in my experiments.
Trials:
Importing the provided theme in the <dom-module> (deprecated):
<dom-module id="x-button">
<link rel="import" type="css" href="theme.css"> <!-- partial styling -->
...
</dom-module>
Result: Styles are restricted to the custom element, but no font styling. plunker
Converting the provided theme into a style module, and including it in the <dom-module>:
<link rel="import" href="theme.html">
<dom-module id="x-button">
<style is="custom-style" include="theme"></style> <!-- partial styling -->
...
</dom-module>
Result: (same effect as Trial 1) plunker
Linking the provided stylesheet in <dom-module>:
<dom-module id="x-button">
<link rel="stylesheet" href="theme.css"> <!-- full styling, leaks -->
...
</dom-module>
Result: x-button fully styled as intended, but styles leak into main page, modifying the background color and a paper-button of the main page. plunker
Linking the provided stylesheet only in index.html:
<head>
<link rel="stylesheet" href="theme.css"> <!-- full styling -->
...
</head>
<body>
<x-button></x-button>
</body>
Result: x-button fully styled as intended. plunker
Hello
I'm starting with Polymer 1.0 and I'm trying to create my first element and load into an html page. I'm using Chrome Dev Editor, the project was created correctly because I could load all the example. After that I eliminate all the example code and create a:
Folder "elements" into the project
"hello-world.html" with the following code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" noscript>
<template>
<h1>Hello World</h1>
</template>
Updated the code in the "index.html" file
<!doctype html>
<html>
<head>
<title>PolyExample</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/hello-world.html">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Test Polymer</h1>
<hello-world></hello-world>
</body>
</html>
I will appreciate any help about this
Thanks in advance
Your code has a serious problem in the way you create your element,
You use a dom-module element to create a new element and you need to write some JS to initialize the element. Below is an example
<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>
The script tag with that code is essential for your element to work.
This is probably as simple as it gets.
To read more on that follow the link:
https://www.polymer-project.org/1.0/docs/start/quick-tour.html
I'm trying to render a simple Polymer-element. I have followed the docs and it is not rendered. The weird thing is that a more complex polymer tags do work (such as <dom-module id=""> ), but no luck with <polymer-element>.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/daniel-element.html">
<title>Polymer Learning</title>
</head>
<body>
<daniel-element></daniel-element>
</body>
</html>
daniel-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="fav-color">
<template>
This is <b>{{owner}}</b>'s fav-color element.
{{owner}} likes the color
<span style="color: {{color}}">{{color}}</span>.
</template>
<script>
Polymer({
owner: "Daniel",
color: "red"
});
</script>
</polymer-element>
When I run:
python -m SimpleHTTPServer
OR
polyserve
The browser does not render the element.
I have looked on this subject and did not found a solution.. thanks before.
The <polymer-element> tag was used in older versions of Polymer. With 1.0 you need to use <dom-module id=""> which does work as you have noticed. Have a look at the migration guide to find out more on specifying local DOM in 1.0.
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.
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.