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.
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>
<div class="center horizontal layout">
<iron-label>
paper radio button
<paper-radio-button noink iron-label-target>Radio</paper-radio-button>
</iron-label>
</div>
Clicking on text paper radio button not forwarding clicks to the radio button but the documentation says: All taps on the iron-label will be forwarded to the "target" element.
It's working in this JS Bin for me.
<!doctype html>
<html>
<head>
<meta name="description" content="http://stackoverflow.com/questions/37816458">
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script href="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-label/iron-label.html" rel="import">
<link href="paper-radio-button/paper-radio-button.html" rel="import">
</head>
<body>
<dom-module id="my-el">
<template>
<iron-label>
clicking here should forward tap to paper-radio-button
<paper-radio-button noink iron-label-target on-tap="radioButtonTapped">Radio</paper-radio-button>
</iron-label>
</template>
<script>
Polymer({
is: 'my-el',
radioButtonTapped: function (e) {
console.log('tap');
}
});
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
https://jsbin.com/juzewi/edit?html,console,output
Please provide a working JSBin that makes this <paper-toolbar> "look pretty" as follows:
Vertically center the <paper-input> and <paper-dropdown-menu> elements to the middle of the <paper-toolbar>.
Vertically align the <paper-input> and <paper-dropdown-menu> horizontal input field lines with each other.
Horizontally space the <paper-input> and <paper-dropdown-menu> elements between each other by at least 20px.
Link to JSBin
http://jsbin.com/hiwoqapawu/edit?html,output
<html>
<head>
<title>My Element</title>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
<base href="http://element-party.xyz/" />
<link rel="import" href="all-elements.html" />
</head>
<body>
<dom-module id="my-element">
<style>
paper-toolbar {
background: var(--paper-blue-100);
}
</style>
<template>
<paper-toolbar>
<paper-input id="search" label="Search">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>Qux</paper-item>
</paper-menu>
</paper-dropdown-menu>
</paper-toolbar>
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
Link to JSBin
http://jsbin.com/bumisimali/edit?html,output
<html>
<head>
<title>My Element</title>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
<base href="http://element-party.xyz/" />
<link rel="import" href="all-elements.html" />
</head>
<body>
<dom-module id="my-element">
<style>
paper-toolbar {
background: var(--paper-blue-100);
#apply(--layout-around-justified);
}
paper-dropdown-menu, paper-input {
#apply(--layout-self-end);
}
</style>
<template>
<paper-toolbar>
<div class="flex"></div>
<paper-input id="search" label="Search">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
<div class="flex"></div>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>Qux</paper-item>
</paper-menu>
</paper-dropdown-menu>
<div class="flex"></div>
</paper-toolbar>
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
I can't get the value of the <paper-toggle-button> element to toggle to the "off" value using <iron-form>.serialize(). Although the visual rendering does appear to toggle to the "off" position.
What am I doing wrong?
Here is a link to the JSBin demo.
Click the toggle button in the demo to see their values.
Each button begins with its value set to "off."
The first click on each button sets the value to "on."
At no time does the value ever toggle back to "off" after it toggles "on."
The visual rendering of each toggle button appears to work as expected.
http://jsbin.com/ruzuwaqiyi/edit?html,output
<!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>
paper-toggle-button {
display: block;
margin-bottom: 40px;
}
</style>
<form is="iron-form" id="form">
<p>Click each button to view the values.</p>
<paper-toggle-button name="foo" on-change="handle">foo</paper-toggle-button>
<paper-toggle-button name="bar" on-change="handle">bar</paper-toggle-button>
<paper-toggle-button name="baz" on-change="handle">baz</paper-toggle-button>
<paper-toggle-button name="bat" on-change="handle">bat</paper-toggle-button>
<p>See how the values never toggle back to "off?"
</form>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
handle: function() {
alert(JSON.stringify(this.$.form.serialize()));
}
});
})();
</script>
</dom-module>
</body>
</html>
I think I'll just use the <paper-checkbox> element instead. JSBin
http://jsbin.com/dewixacagu/edit?html,output
<!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>
paper-checkbox {
display: block;
margin-bottom: 40px;
}
</style>
<form is="iron-form" id="form">
<p>Click each button to view the values.</p>
<paper-checkbox name="foo" on-change="handle">foo</paper-checkbox>
<paper-checkbox name="bar" on-change="handle">bar</paper-checkbox>
<paper-checkbox name="baz" on-change="handle">baz</paper-checkbox>
<paper-checkbox name="qux" on-change="handle">qux</paper-checkbox>
<p>See how the values toggle back to "off" now?</p>
</form>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
handle: function() {
alert(JSON.stringify(this.$.form.serialize()));
}
});
})();
</script>
</dom-module>
</body>
</html>
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>