This must be a useful and widely applied design to stack menus dynamically and from a custom element. I spent hours debugging this and come so far as some events (iron-select) are not being propagated [correctly].
In short
<paper-menu>
<mycustommenu data="menuJsonDefinition"></mycustommenu>
<paper-menu>
where mycustommenu renders paper-item or paper-submenu recursively,
so in the end it looks like
<PAPER-MENU>
<mycustommenu>
<PAPER-SUBMENU>
<PAPER-ITEM class="menu-trigger">submenutrigger</PAPER-ITEM>
<PAPER-MENU class="menu-content">
<PAPER-ITEM>xx</PAPER-ITEM>
</PAPER-MENU>
</PAPER-SUBMENU>
</mycustommenu>
</PAPER-MENU>
It WORKS so far. But as soon as we add recursion and replace inner
<PAPER-ITEM>xx</PAPER-ITEM>
with <mycustommenu> which renders to
<mycustommenu><PAPER-ITEM>xx</PAPER-ITEM></mycustommenu>
it doesn't click/select anymore
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
</head>
<body>
<dom-module id="paper-treeitem">
<template>
<template is="dom-if" if="{{data.folder}}">
<paper-submenu>
<paper-item class="menu-trigger">{{data.name}}</paper-item>
<paper-menu class="menu-content" multi>
<template is="dom-repeat" items="{{data.children}}">
<!-- WORKING -->
<!-- COMMENT THIS LINE -->
<paper-item>{{item.name}}</paper-item>
<!-- NOT WORKING -->
<!-- UNCOMMENT THIS LINE -->
<!-- <paper-treeitem data="{{item}}"></paper-treeitem> -->
</template>
</paper-menu>
</paper-submenu>
</template>
<template is="dom-if" if="{{!data.folder}}">
<paper-item>{{data.name}}</paper-item>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'paper-treeitem',
properties: {
data: {
type: Object,
value: function() {
return {};
}
}
},
ready: function(){
console.log(this, this.data)
}
});
});
</script>
</dom-module>
<paper-menu>
<paper-treeitem id="tRootTreeItem"></paper-treeitem>
</paper-menu>
<script>
(function() {
window.z = document.querySelector("#tRootTreeItem");
z.data = {
name: "Root",
folder: true,
children: [{
name: "File 1"
}]
};
})()
</script>
</body>
</html>
I posted it at github as well https://github.com/PolymerElements/paper-menu/issues/93
Related
Here is my jsBin.
I want to access by its id a DOM node inside a dom-if template. With my existing code, I expect to see true when attempting to cast these nodes to Booleans, but instead I get false (i.e., undefined).
Steps to recreate the problem:
Open this jsBin.
Understand that the HTML pane on the right is working correctly by showing Foo and Bar and not showing Baz.
Observe the console and understand the id="foo" node is accessible but the id="bar" and id="baz" elements are not. And this is my problem.
How can I access those nodes imperatively?
http://jsbin.com/kemoravote/1/edit?html,console,output
<!doctype html>
<head>
<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="iron-form/iron-form.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<div id="foo">Foo</div>
<template is="dom-if" if="{{show}}">
<div id="bar">Bar</div>
</template>
<template is="dom-if" if="{{!show}}">
<div id="baz">Baz</div>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
show: {
type: Boolean,
value: function() {
return true;
}
}
},
attached: function() {
console.log('foo', !!this.$.foo);
console.log('bar', !!this.$.bar);
console.log('baz', !!this.$.baz);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
The $ selector won't work. You have to use $$ as follows:
console.log('baz', !!this.$$('#baz'));
Here is the jsBin.
http://jsbin.com/xogediyato/1/edit?html,console,output
<!doctype html>
<head>
<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="iron-form/iron-form.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<div id="foo">Foo</div>
<template is="dom-if" if="{{show}}">
<div id="bar">Bar</div>
</template>
<template is="dom-if" if="{{!show}}">
<div id="baz">Baz</div>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
show: {
type: Boolean,
value: function() {
return true;
}
}
},
attached: function() {
console.log('foo', !!this.$.foo);
console.log('bar', !!this.$.bar);
console.log('baz', !!this.$.baz);
console.log('bar', !!this.$$('#bar'));
console.log('baz', !!this.$$('#baz'));
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
I want to set the paper-dropdown-menu to the value of 'Three' upon loading. I want to do this by data binding the value attribute of the paper-dropdown-menu to a sub property of the element called item.number which is set when registering the element. When I attempt this using the below code, the result I see is that the paper-dropdown-menu displayed value is just blank instead of reading 'Three'.
What code changes will achieve my desired behavior?
Follow these steps to reproduce the problem.
Open this JSBin.
Note the content of the display value of the dropdown menu is blank.
Click the button labeled Click to show item
Observe the console prints:
[object Object] {
number: "Three"
}
Understand the above steps demonstrate my desired behavior is not occurring.
Select the number "Four" in the dropdown menu.
Click the button labeled Click to show item
Observe the console prints:
[object Object] {
number: "Four"
}
Understand the above step shows one-way data binding is working on the element.
How can I achieve my desired behavior?
http://jsbin.com/loceqayezo/1/edit?html,console,output
<!doctype html>
<head>
<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-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="paper-listbox/paper-listbox.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<button on-tap="show">Click to show item</button>
</p>
<paper-dropdown-menu label="Numbers"
value="{{item.number}}">
<paper-listbox class="dropdown-content">
<paper-item>One</paper-item>
<paper-item>Two</paper-item>
<paper-item>Three</paper-item>
<paper-item>Four</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
item: {
type: Object,
notify: true,
value: function() {
return {number: "Three"};
},
},
},
show: function() {
console.log('item', this.item);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
Your code doesn't work because value property of <paper-dropdown-menu> is read-only. See the documentation.
Instead you can bind to <paper-listbox selected>. With minimal changes you will have to bind to dropdown's element index.
Polymer({
is: "x-element",
properties: {
item: {
type: Object,
notify: true,
value: function() {
return {number: 2};
},
},
},
show: function() {
console.log('item', this.item);
},
});
<!doctype html>
<head>
<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-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="paper-listbox/paper-listbox.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<button on-tap="show">Click to show item</button>
</p>
<paper-dropdown-menu label="Numbers">
<paper-listbox class="dropdown-content"
selected="{{item.number}}">
<paper-item>One</paper-item>
<paper-item>Two</paper-item>
<paper-item>Three</paper-item>
<paper-item>Four</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
<x-element></x-element>
</body>
To keep the full name in your item you can add an attribute to you selectable elements and use the attrForSelected property of paper-listbox.
Polymer({
is: "x-element",
properties: {
item: {
type: Object,
notify: true,
value: function() {
return {number: "Three"};
},
},
},
show: function() {
console.log('item', this.item);
},
});
<!doctype html>
<head>
<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-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="paper-listbox/paper-listbox.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<button on-tap="show">Click to show item</button>
</p>
<paper-dropdown-menu label="Numbers">
<paper-listbox class="dropdown-content"
selected="{{item.number}}"
attr-for-selected="data-item">
<paper-item data-item="One">One</paper-item>
<paper-item data-item="Two">Two</paper-item>
<paper-item data-item="Three">Three</paper-item>
<paper-item data-item="Four">Four</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
<x-element></x-element>
</body>
Hi I am trying to vulcanize my app but using webcomponents-lite.js doesnt seem to polyfill correctly and reading up I found a suggestion that says to use webcomponents.js, problem there is when I use that i get these errors:
Unable to get property 'mousedown' of undefined or null reference
Unable to get property 'click' of undefined or null reference
and thats if I vulcanize or not. Must say I am having more issues using Polymer than I think I should. Works no problem with Chrome but other browsers fight me at every turn.
here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/elements.html">
<link rel="import" href="css/main.html">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="fullbleed">
<template id="app" is="dom-bind">
<paper-drawer-panel>
<paper-header-panel main>
<paper-toolbar>
<div>Toolbar</div>
<paper-icon-button icon="menu" paper-drawer-toggle>
</paper-icon-button>
<span class="flex"></span>
<paper-button onclick="_logout()">
<div>Log out</div>
</paper-button>
</paper-toolbar>
<neon-animated-pages class="flex" selected="{{selected}}">
<view-profile></view-profile>
<add-skill></add-skill>
<search-skill></search-skill>
<view-users></view-users>
</neon-animated-pages>
</paper-header-panel>
<paper-header-panel drawer>
<paper-toolbar>
</paper-toolbar>
<paper-menu class="list" selected="{{selected}}">
<paper-item>
<iron-icon icon="account-circle"></iron-icon>
<span>Profile</span>
</paper-item>
<paper-item>
<iron-icon icon="add" on-click="showAddSkill"></iron-icon>
<span>Add Skills</span>
</paper-item>
<paper-item>
<iron-icon icon="search"></iron-icon>
<span>Search</span>
</paper-item>
<paper-item>
<iron-icon icon="android"></iron-icon>
<span>Users</span>
</paper-item>
</paper-menu>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
this is my elements.html:
<!-- Iron -->
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<!-- Neon -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">
<!-- Routing -->
<link rel="import" href="routing.html">
and this is the custom element that throws the error:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/elements.html">
<dom-module id="add-skill">
<style>
paper-dropdown-menu{
width: 20%;
--paper-input-container-label:{
color: red;
};
--paper-input-container-focus-color: red;
}
paper-input{
--paper-input-container-label:{
color: red;
};
--paper-input-container-label-focus:{
color: red;
};
--paper-input-container-underline:{
color: red;
};
--paper-input-container-focus-color: red;
}
form{
margin: 0px 0px 0px 100px;
}
paper-input{
width: 100px;
}
paper-button{
color: red;
}
paper-menu-button{
width: 100%;
}
</style>
<template id="skillForm">
<paper-material elevation="1">
<form is="iron-form "id="formPost" method="POST" action="../../scripts/insertSkill.php" onSubmit="window.location='skills.integr8it.local'">
<paper-dropdown-menu id="vendorMenu" label="Vendor" selected-item-label="{{vendorSelected}}">
<paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="itemSelected">
<template is="dom-repeat" items="{{vendorList}}">
<paper-item id="vendorName" value="[[item]]">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedVendorName" name="selectedVendorName" value="[[vendorSelected]]" type="hidden">[[vendorSelected]]</input>
<br />
<paper-dropdown-menu id="certificationMenu" label="Certification" selected-item-label="{{certificationSelected}}">
<paper-menu class="dropdown-content" id="certificationSelect">
<template is="dom-repeat" items="{{certificationList}}">
<paper-item id="certificationName" value="item">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input name="selectedCertificationName" value="[[certificationSelected]]" type="hidden"></input>
<br />
<paper-dropdown-menu id="classMenu" label="Class" selected-item-label="{{classSelected}}">
<paper-menu class="dropdown-content" id="classSelect">
<template is="dom-repeat" items="{{classesList}}">
<paper-item id="className" value="{{item}}">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedClassName" name="selectedClassName" value="[[classSelected]]" type="hidden">[[classSelected]]</input>
<br />
<paper-input name="year" label="Year" type="number" maxlength="4" max="2000" min="1990" auto-Validate required error-message="Year must be entered" value="{{year}}}">
{{year}}
</paper-input>
<br />
<paper-button class="primary" id="submitButton" raised onclick="clickHandler(event)" disabled>Submit</paper-button>
<paper-item id="error"></paper-item>
</form>
</paper-material>
<iron-ajax
id="vendorSubmit"
method="POST"
url="../../scripts/addskill.php"
handle-as="json"
on-response="handleVendorResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="certificationSubmit"
method="POST"
url="../../scripts/getCertification.php"
handle-as="json"
on-response="handleCertificationResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="classSubmit"
method="POST"
url="../../scripts/getClass.php"
handle-as="json"
on-response="handleClassResponse"
debounce-duration="300">
</iron-ajax>
</template>
<script>
function clickHandler(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
Polymer({
is:'add-skill',
behaviors:[Polymer.NeonAnimatableBehavior],
properties:{
animationConfig:{
value:function(){
return{
'entry':{
name:'slide-from-right-animation',
node:this
},
'exit':{
name:'slide-left-animation',
node:this
}
};
}
}
},
ready:function(){
this.sendVendorRequest();
this.vendorList = [];
this.certificationList = [];
this.sendClassRequest();
this.classesList = [];
var cookie = document.cookie;
},
sendVendorRequest:function(){
var datalist = 'vendor='+encodeURIComponent('1');
this.$.vendorSubmit.body = datalist;
this.$.vendorSubmit.generateRequest();
},
handleVendorResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('vendorList', response[i].name);
}
},
submitForm:function(event){
Polymer.dom(event).localTarget.parentElement.submit();
},
sendCertificationRequest:function(vendor){
var datalist = 'vendorName='+encodeURIComponent(vendor);
this.$.certificationSubmit.body = datalist;
this.$.certificationSubmit.generateRequest();
},
handleCertificationResponse:function(request){
this.splice('certificationList', 0, this.certificationList.length);
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('certificationList', response[i].name);
}
},
sendClassRequest:function(className){
var datalist = 'class='+encodeURIComponent('1');
this.$.classSubmit.body = datalist;
this.$.classSubmit.generateRequest();
},
handleClassResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length; i++){
this.push('classesList', response[i].name);
}
},
itemSelected : function(e) {
var selectedItem = e.target.selectedItem;
if (selectedItem) {
this.sendCertificationRequest(selectedItem.innerText);
console.log("selected: " + selectedItem.innerText);
}
this.validate();
},
listeners:{
'iron-form-submit': '_redirect',
'iron-form-response': '_redirect'
},
validate:function(){
var selectedVendor = document.getElementById('selectedVendorName');
if(selectedVendor.text !== null){
this.$.submitButton.disabled = false;
}
},
showIndex:function(){
this.$.skillForm.render();
this.fire('_showIndex');
},
});
</script>
</dom-module>
the app loads slowly which makes sense as I am importing alot so the vulcanize was suggested to sort that out. And I get a random hierarchy message on IE. if I reload the page a few time it foes away. Again vulcanize was suggested to fix that as well
The issue is caused by the ShadowDOM polyfill.
If webcomponents-lite.js, which doesn't have ShadowDOM, is used instead of webcomponents.js then all will work correctly.
Since 0.8-preview polymer only depends on webcomponents-lite.js, so you can use this instead of webcomponents.js without any problem: ShadowDom polyfill will definitely be unnecessary since polymer 0.8-preview
Personally, I have not needed to use the Shadow DOM so far...
Example of Shadow DOM:
<dom-module id="my-webcomponent">
<style>
...
</style>
<!-- //////////// Content of <template> will be appended to the <my-webcomponent> tag (works perfectly with webcomponents-lite.js) -->
<template>
<h1>Shadow Root!</h1>
</template>
<!-- //////////// This is Shadow DOM (doesn't work with webcomponents-lite.js) -->
<div id="outsideTemplate">
<h1>Shadow DOM!</h1>
</div>
<script>
Polymer({
is: "my-webcomponent",
...
...
...
});
</script>
</dom-module>
More information:
https://github.com/webcomponents/webcomponentsjs/issues/75
https://github.com/webcomponents/webcomponentsjs/issues/89
If you still want to use webcomponents.js and have problems with JQuery, perhaps (I have not tried it) there are one "solution":
You could wrap all your JQuery stuff inside this IIFE:
(function(document) {
// JQuery code here
})(wrap(document));
NOTE:
Firefox team are (still) working on it: https://hacks.mozilla.org/2014/12/mozilla-and-web-components/
Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code below you can see my commented section in which the paper-items are hard-coded. This works fine.
My next step was to try and build my menu dynamically by using the <template is="dom-repeat"> element to iterate over an arbitrary array of menu items. The menu is rendered correctly (I can see all the menu items that are bound to the array), but I cannot click on the items and no iron-pages are displayed. It seems that the data-category attribute which is used for attr-for-selected is not working inside <template is="dom-repeat">.
In what ways can I get this to work?
Edit: Removing the attr-for-selected attributes and switching the iron-pages using the index work, but relying on the index of the array is not an option in my situation.
My index.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<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/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
Try <paper-item data-category$="{{item.itemNum}}" label$="{{item.itemNum}}">, from the docs, that will call paper-item.setAttribute('data-category', itemNum) instead of paper-item.data-category = itemNum.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding
I'm searching for understanding how polymer works. How can I handle selecting menu item from list form that markup ?
<paper-menu-button icon="menu">
<div>kg</div>
<div>pcs</div>
<div>lt</div>
</paper-menu-button>
Here is an example for a popup menu that binds event functions to the menu items. It uses paper-items instead of divs, but divs would work as well.
<!doctype html>
<html>
<head>
<script src="../lib/platform/platform.js"></script>
<link href="../lib/core-icons/core-icons.html" rel="import">
<link href="../lib/paper-menu-button/paper-menu-button.html" rel="import">
<link href="../lib/paper-item/paper-item.html" rel="import">
</head>
<body unresolved>
<polymer-element name="my-menu">
<template>
<paper-menu-button icon="menu">
<paper-item on-tap="{{refresh}}">Refresh</paper-item>
<paper-item on-tap="{{help}}">Help</paper-item>
<paper-item on-tap="{{signOut}}">Sign out</paper-item>
</paper-menu-button>
</template>
<script>
Polymer('my-menu', {
refresh: function () { console.log('Refresh'); },
help: function () { console.log('Help'); },
signOut: function () { console.log('Sign out'); }
});
</script>
</polymer-element>
<my-menu></my-menu>
</body>
</html>