{ "name": "main-page", "main": "main-page.html", "dependencies": { "polymer": "Polymer/polymer#^1.4.0", "polymer-ts": "^0.2.2", "paper-button": "PolymerElements/paper-button#^2.0.0", "paper-dialog": "PolymerElements/paper-dialog#^2.0.0", "csv-render":
"LRNWebComponents/csv-render#^0.1.0", "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0", "papa-parser": "milesje/papa-parser#^1.0.0", "iron-data-table": "Saulis/iron-data-table#^1.0.7", "vaadin-grid": "vaadin/vaadin-grid#^3.0.1",
"paper-datatable": "David-Mulder/paper-datatable#^0.9.8" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", "web-component-tester": "^6.0.0-prerelease.5",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" }, "resolutions": { "paper-button": "^2.0.0", "polymer": "^1.9.0", "iron-a11y-keys-behavior": "^v2.0.0", "iron-resizable-behavior": "^v2.0.0", "iron-scroll-target-behavior": "^v2.0.0", "iron-a11y-announcer":
"^v2.0.0", "webcomponentsjs": "^0.7.0", "paper-styles": "~1.0.12" } }
paper-dialog works fine for most of the times but sometimes it shows white space above it, I am trying to put paper-datatable within paper-dialog. Please help.
/// <reference path = "../bower_components/polymer-ts/polymer-ts.d.ts"/>
#component("main-view")
class MainView extends polymer.Base {
#property ({type:Array, value: []})
records;
parseData(url, onSuccess: (tasks) => void) {
Papa.parse(url,{
header: true,
download: true,
complete: function (results) {
onSuccess(results.data)
}
})
}
openDialog() {
this.parseData("./csv/demo.csv",(records) => {
this.records = records
});
this.$.dialog.open();
}
}
MainView.register();
{
"name": "main-page",
"main": "main-page.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0",
"polymer-ts": "^0.2.2",
"paper-button": "PolymerElements/paper-button#^2.0.0",
"paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
"csv-render": "LRNWebComponents/csv-render#^0.1.0",
"paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
"papa-parser": "milesje/papa-parser#^1.0.0",
"iron-data-table": "Saulis/iron-data-table#^1.0.7",
"vaadin-grid": "vaadin/vaadin-grid#^3.0.1",
"paper-datatable": "David-Mulder/paper-datatable#^0.9.8"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^6.0.0-prerelease.5",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"resolutions": {
"paper-button": "^2.0.0",
"polymer": "^1.9.0",
"iron-a11y-keys-behavior": "^v2.0.0",
"iron-resizable-behavior": "^v2.0.0",
"iron-scroll-target-behavior": "^v2.0.0",
"iron-a11y-announcer": "^v2.0.0",
"webcomponentsjs": "^0.7.0",
"paper-styles": "~1.0.12"
}
}
<!DOCTYPE html>
<link rel="import" href="../bower_components/polymer/polymer.html"/>
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/polymer-ts/polymer-ts.html"/>
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"/>
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/papa-parser/papa-parser.html"/>
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"/>
<link rel="import" href="../bower_components/paper-datatable/paper-datatable.html">
<dom-module id="main-view">
<style>
.preview {
background-color: var(--paper-indigo-500);
color: white;
text-align: center;
margin: auto;
}
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
}
</style>
<template>
<paper-button raised class="preview" on-tap="openDialog">OPEN PREVIEW</paper-button>
<paper-dialog id="dialog" with-backdrop>
<paper-dialog-scrollable>
<paper-datatable data={{records}}>
<paper-datatable-column header="Names">
<template>
<span>{{item.Name}}</span>
</template>
</paper-datatable-column>
<paper-datatable-column header="Email">
<template>
<span>{{item.Email}}</span>
</template>
</paper-datatable-column>
<paper-datatable-column header="Score">
<template>
<span>{{item.Score}}</span>
</template>
</paper-datatable-column>
<paper-datatable-column header="Date">
<template>
<span>{{item.Date}}</span>
</template>
</paper-datatable-column>
</paper-datatable>
</paper-dialog-scrollable>
</paper-dialog>
</template>
</dom-module>
Related
Trying to get to grips with Polymer and the whole Material Design side of things. I have used this at work and it runs correctly, however when I am attempting to do things on my own at home it never works properly... Even if I am installing the examples from Polymer themselves, ie:
polymer init polymer-1-application
For example in the title I have given the paper-card component which just doesn't seem to work. I have gotten the app-header/app-toolbar up and running but that was by copying and pasting other code in.
Please see code below (I am only going to include the important bits and pieces, please assume all of the tags are correct)
index.html
<!doctype html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/newProj-header-bar.html">
<link rel="import" href="elements/newProj-card.html">
<style>/* CSS HERE */</style>
</head>
<body unresolved>
<newProj-header-bar></newProj-header-bar>
<newProj-card></newProj-card>
</body>
</html>
new-Poj-header-bar.html (all code included)
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.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-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-toolbar/app-toolbar.html">
<dom-module id="newProj-header-bar">
<template>
<style>
:host {
display: block;
background: #115f9b;
color: white;
}
</style>
<app-header slot="header" reveals shadow effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>Adam's App</div>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="create"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>
</app-header>
</template>
<script>
Polymer({
is: 'newProj-header-bar',
properties: {
},
});
</script>
</dom-module>
newProj-card.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<dom-module id="newProj-card">
<template>
<style>
:host {
display: block;
}
</style>
<paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</template>
<script>
Polymer({
is: 'newProj-card',
properties: {
},
});
</script>
EDIT (14/06/17)
I changed the naming conventions to not have any capital letters as Pascal L suggested, however things still aren't working. I even tried with using paper-material, but no dice.
I will now show you the bower.json for paper-card to see if it something to do with incompatible versions or something...
Looking for my bower.json file I found that I have a "bower.json" but also a ".bower.json" along with the standard ".gitignore" file... the dotted one seems to have a bit more info, but not sure what is going on or why two files...
paper-card/bower.json
{
"name": "paper-card",
"private": false,
"main": "paper-card.html",
"ignore": [
"README.md"
],
"dependencies": {
"paper-shadow": "Polymer/paper-shadow#master",
"paper-ripple": "Polymer/paper-ripple#master"
}
}
.bower.json
{
"name": "paper-card",
"private": false,
"main": "paper-card.html",
"ignore": [
"README.md"
],
"dependencies": {
"paper-shadow": "Polymer/paper-shadow#master",
"paper-ripple": "Polymer/paper-ripple#master"
},
"homepage": "https://github.com/andytuwm/paper-card",
"version": "0.1.5",
"_release": "0.1.5",
"_resolution": {
"type": "version",
"tag": "0.1.5",
"commit": "092df7a4e6766a6acc26d42447811fcf2a844998"
},
"_source": "https://github.com/andytuwm/paper-card.git",
"_target": "^0.1.5",
"_originalSource": "paper-card",
"_direct": true
}
Hi you must rename your newProj-card Component to new-proj-card since Html does not allow uppercase letters as tag names.
Can anyone show using jsBin an example of how to use app-route?
https://jsbin.com/retokid/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer</title>
<script src="https://polygit.org/app-route+polymerelements+*/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-input/paper-input.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-route.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-location.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/iron-pages/iron-pages.html">
</head>
<body>
<x-shell></x-shell>
<dom-module id="x-a">
<template>
<h2>page A</h2>
<paper-input value="{{email}}" placeholder="set email"></paper-input>
<paper-input value="{{phone}}" placeholder="set phone"></paper-input>
<paper-button on-click="_submit">submit</paper-button>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-a',
properties: {
email: {
type: String
}
},
_submit: function() {
this.fire('info-updated', {
email: this.email,
phone: this.phone
});
}
});
});
</script>
</dom-module>
<dom-module id="x-b">
<template>
<h2>page B</h2>
<div>
email: [[userInfo.email]]
</div>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-b',
properties: {
email: {
type: String
}
}
});
});
</script>
</dom-module>
<dom-module id="x-shell">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-selector selected="{{routeData.page}}" attr-for-selected="name" role="navigation">
<a name="x-a" href="#/x-a">x-a</a>
<a name="x-b" href="#/x-b">x-b</a>
</iron-selector>
<iron-pages selected="[[routeData.page]]" attr-for-selected="name">
<x-a name="x-a" route="{{route}}" user-info="[[userInfo]]" on-info-updated="_updateInfo"></x-a>
<x-b name="x-b" route="{{route}}" user-info="[[userInfo]]"></x-b>
</iron-pages>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-shell',
properties: {
userInfo: {
type: Object,
value: function() {
return {};
}
},
page: {
type: String,
reflectToAttribute: true
}
},
_updateInfo: function(event) {
console.log('infoUpdated', event.detail);
this.set('userInfo', event.detail);
}
});
});
</script>
</dom-module>
</body>
</html>
This is your worked example, check it please.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer</title>
<script src="https://polygit.org/app-route+polymerelements+*/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-input/paper-input.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-route.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-location.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/iron-pages/iron-pages.html">
</head>
<body>
<x-shell></x-shell>
<dom-module is="x-a">
<template>
<h2>page A</h2>
<paper-input value="{{email}}" placeholder="set email"></paper-input>
<paper-input value="{{phone}}" placeholder="set phone"></paper-input>
<paper-button on-tap="_submit">submit</paper-button>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-a',
properties: {
email: {
type: String
}
},
_submit: function() {
this.fire('info-updated', {
email: this.email,
phone: this.phone
});
}
});
});
</script>
</dom-module>
<dom-module is="x-b">
<template>
<h2>page B</h2>
<div>
email: [[userInfo.email]]
</div>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-b',
properties: {
userInfo: {
type: Object
}
}
});
});
</script>
</dom-module>
<dom-module is="x-shell">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-selector selected="{{routeData.page}}" attr-for-selected="name" role="navigation">
<a name="x-a" href="#/x-a">x-a</a>
<a name="x-b" href="#/x-b">x-b</a>
</iron-selector>
<iron-pages selected="[[routeData.page]]" attr-for-selected="name">
<x-a name="x-a" route="{{route}}" user-info="[[userInfo]]" on-info-updated="_updateInfo"></x-a>
<x-b name="x-b" route="{{route}}" user-info="[[userInfo]]"></x-b>
</iron-pages>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-shell',
properties: {
userInfo: {
type: Object,
value: function() {
return {};
}
},
page: {
type: String,
reflectToAttribute: true
}
},
_updateInfo: function(event) {
console.log('infoUpdated', event.detail);
this.set('userInfo', event.detail);
}
});
});
</script>
</dom-module>
</body>
</html>
Text falls outside dialog
Here is the plunk
I want to implement neon-animated-pages controlled by paper-tabs inside a paper-dialog.
I expect to see the content of tab-a and tab-b contained inside the paper-dialog but instead the content spills over to outside the paper-dialog.
What am I missing?
http://plnkr.co/edit/bPUclBOpghNFVmKMbOzc?p=preview
<link href="tab-a.html" rel="import">
<link href="tab-b.html" rel="import">
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="iron-pages/iron-pages.html">
<link rel="import" href="neon-animation/neon-animation.html">
<link rel="import" href="neon-animated-pages/neon-animated-pages.html">
<dom-module id="content-el">
<template>
<style></style>
<button on-tap="open">Open Dialog</button>
<paper-dialog id="dialog" modal>
<h2>Dialog Title</h2>
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
</paper-tabs>
<neon-animated-pages selected="{{selected}}">
<tab-a entry-animation="slide-from-left-animation"
exit-animation="slide-left-animation"
></tab-a>
<tab-b entry-animation="slide-from-right-animation"
exit-animation="slide-right-animation"
></tab-b>
</neon-animated-pages>
</paper-dialog>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'content-el',
behaviors: [
Polymer.NeonAnimationRunnerBehavior,
Polymer.NeonAnimatableBehavior,
Polymer.IronResizableBehavior,
],
properties: {
selected: {
type: Number,
value: 0
}
},
open: function() {
this.$.dialog.open();
},
});
})();
</script>
</dom-module>
The off-dialog content is inside <neon-animated-pages>, and inspecting the <neon-animated-pages> reveals that it has no height:
To fix this, apply CSS styles to the <paper-dialog> and the <neon-animated-pages> to set their width/height; and set overflow on the pages to allow scrolling. For example:
<dom-module id="content-el">
<template>
<style>
paper-dialog {
width: 75%;
min-width: 50vw;
}
neon-animated-pages {
margin: 2em;
height: 100%;
min-height: 25vh;
overflow: auto;
}
</style>
...
</template>
</dom-module>
plunker
how to get scope from other page in iron-page, i'm using the starter-kit polymer, i need get the scope for exec a method in these view
my-app.html
<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-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="my-icons.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
<a name="el1" href="/el1">Element 1</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div> <paper-icon-button icon="polymer" on-click="openToast" ></paper-icon-button>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-el1 name="el1"></my-el1>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
},
observers: [
'_routePageChanged(routeData.page)',
],
_routePageChanged: function(page) {
this.page = page || 'view1';
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
openToast: function() {
console.info('here open the toast');
//open toast
}
});
</script>
</dom-module>
my toast in this element <my-el1 name="el1"></my-el1>
my-el1.html
<!-- POLYMER CORE -->
<link rel="import" href="../bower_components/polymer/polymer.html" />
<!-- PAPER ELEMENT -->
<link rel="import" href="../bower_components/paper-toast/paper-toast.html" />
<dom-module id="my-el1">
<template>
<style is="custom-style">
</style>
<paper-toast id="toastr" duration="0" text="Hello world!"></paper-toast>
</template>
<script>
Polymer({
is : 'my-el1'
});
</script>
</dom-module>
need show this toast from <paper-icon-button icon="polymer" on-click="openToast" > this button is my-app.html the parent element
You must retrieve a reference to the my-el1 dom node and it's internal paper toast.
Here's an example:
openToast: function() {
var el1 = this.$$('my-el1[name="el1"]');
el1.$.toastr.open();
}
I do find this problematic though as it defeats the purpose of encapsulation.
Another approach is providing my-el1 a method (I much prefer via attribute but this could also work) to show the paper-toast.
On your my-el1:
Polymer({
is : 'my-el1',
openToast: function() {
this.$.toastr.opened = true; // or this.$.toastr.open()
}
});
And on your my-app:
Polymer({
is: 'my-app',
...
openToast: function() {
var el1 = this.$$('my-el1[name="el1"]'); // or better yet, give an id to my-el1 so you can just refer it using this.$
el1.openToast();
}
});
I'm following this tutorial to build a Material Design app with Polymer.
http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#6
when I implement this i get this error
TypeError: Cannot read property 'save' of undefined
this error is happening in the dataChanged function
anyone know why?
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.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/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">
<polymer-element name="codelab-app">
<template>
<link rel="stylesheet" href="styles.css">
<core-drawer-panel id="drawerPanel" responsiveWidth="600px">
<core-header-panel drawer>
<core-toolbar>Menu</core-toolbar>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>
<span flex>My notes</span>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<paper-fab icon="icons:add" on-click="{{showNewNoteInput}}"></paper-fab>
</core-toolbar>
<div class="content">
<paper-input id="newNoteInput"
floatingLabel
label="Add a new note"
on-change="{{add}}"
value="{{newNote}}"></paper-input>
<template repeat="{{data}}" >
<div center horizontal layout class="item">
<paper-checkbox checked="{{done}}" on-change="{{dataChanged}}"></paper-checkbox>
<div flex class="card">
<p>{{body}}</p>
</div>
</div>
<core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>
</div>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
Polymer('codelab-app', {
data: [],
add: function() {
if (this.newNote) {
this.data.unshift({
body: this.newNote,
done: false
});
this.$.newNoteInput.style.display = 'none';
this.$.newNoteInput.value = null;
}
},
toggleDrawer: function() {
this.$.drawerPanel.togglePanel();
},
ready: function() {
this.$.newNoteInput.style.display = 'none';
},
showNewNoteInput: function() {
this.$.newNoteInput.style.display = 'block';
},
dataChanged: function() {
this.$.storage.save();
}
});
</script>
</polymer-element>
You are looping the creation of a static ID tag, and because you shouldn't have duplicates of an ID, it is throwing an error.
Lines causing the issue:
<template repeat="{{data}}" >
<core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>