In this jsBin, I'm trying to add a paper-fab to my element.
I expect to see a shadow corresponding to the elevation property. But instead I see no shadow. All the elevations seem to have the same shadow (implied z-depth).
Is the problem with my code or the element?
http://jsbin.com/corisahoqi/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-fab/paper-fab.html" rel="import">
<link href="iron-icons/iron-icons.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
paper-fab {
margin: 15px;
}
</style>
<paper-fab icon="add" elevation="5"></paper-fab>
<paper-fab icon="add" elevation="4"></paper-fab>
<paper-fab icon="add" elevation="3"></paper-fab>
<paper-fab icon="add" elevation="2"></paper-fab>
<paper-fab icon="add" elevation="1"></paper-fab>
</template>
<script>
(function(){
Polymer({
is: "x-element",
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
Looks to me like a problem with the element. In the documentation, it sounds as if it could be used the way you intend.
The z-depth of this element, from 0-5. Setting to 0 will remove the shadow, and each increasing number greater than 0 will be "deeper" than the last
But then elevation property is read-only, so setting it has no effect.
paper-fab implements the paper-button-behavior. As #Maria mentioned elevation only returns the resulting elevation, it is readonly and can't be set.
You could try adding attributes like raised (?), focused (?), disabled (0), active (4), pressed (4), receivedFocusFromKeyboard (3) which should moify the elevation but that seems all that is supported (if at all).
I just found this issue report which confirms #Maria's answer.
So, as a patch, I am adding the following CSS code (jsBin) to add a shadow on hover to simulate the material design elevation spec here.
Button Elevation. Raised buttons have a default elevation of 2dp. On desktop, raised buttons can gain this elevation on hover.
paper-fab:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
}
http://jsbin.com/hitororuja/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-fab/paper-fab.html" rel="import">
<link href="iron-icons/iron-icons.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
paper-fab:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
}
</style>
<paper-fab icon="send"></paper-fab>
</template>
<script>
(function(){
Polymer({
is: "x-element",
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
Related
I want to import an element that contains a paper-fab and have the paper-fab overlap the seam between the app-header element and the imported element. (In this case, I'm calling the imported element a fab-element). In other words, I simply want the paper-fab to "float" (as advertised and like it's supposed to).
What I expect it to look like:
jsBin
What it actually looks like:
FAB inside app-toolbar. (works) Click here for jsBin.
FAB outside app-toolbar but inside app-header. (works) Click here for jsBin.
FAB outside app-header and inside main-content. (fails) Click here for jsBin.
I need to use the app-header-layout element and import the fab-element inside the main content section. As the above 3 jsBins show, that last combination seems to break the element (causing the top half of the paper-fab to hide underneath the app-toolbar).
How do I get the entire paper-fab to float over the app-toolbar while using the fab-element inside the main content section of the app-header-layout?
Or does this potentially expose a possible bug in app-header-layout element itself?
Edit
z-index (on paper-fab) has no effect.
Notice the last example has the z-index increased to 99999. It still seems to have no effect on the output.
Edit 2
z-index (on parent element) has no effect.
Also, setting the z-index on the parent element fab-element also has no impact on the result.
Edit 3
I wonder if what's happening with the z-index described in this question (read the comments) is related?
Per #robodna on Polymer Slack Site provides the following answer:
Set z-index:2!important on #contentContainer.
See this jsBin.
http://jsbin.com/mitegigose/edit?html,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-icon/iron-icon.html" rel="import">
<link href="iron-icons/iron-icons.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="app-layout/app-drawer/app-drawer.html" rel="import">
<link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
<link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
<link href="app-layout/app-header/app-header.html" rel="import">
<link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
<link href="paper-fab/paper-fab.html" rel="import">
</head>
<body>
<dom-module id="fab-element">
<template>
<style>
paper-fab {
position: absolute;
right: 40px;
top: 40px;
z-index: 99999;
}
</style>
<paper-fab icon="add"></paper-fab>
</template>
<script>
(function(){
Polymer({
is: "fab-element",
properties: {},
});
})();
</script>
</dom-module>
<dom-module id="x-element">
<template>
<style>
app-toolbar {
color: white;
background-color: #3F51B5;
z-index: 1;
}
app-header-layout ::content #contentContainer {
z-index: 2!important;
}
fab-element {
z-index: 99999;
}
</style>
<app-header-layout>
<app-header fixed condenses effects="waterfall">
<app-toolbar>
<div main-title>App name</div>
</app-toolbar>
</app-header>
<div>
main content
<fab-element></fab-element>
</div>
</app-header-layout>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
Is there a way to use an icon from the Font Awesome library as the icon inside a paper-icon-button?
Here is my jsBin.
http://jsbin.com/rahesepeho/2/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<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-icon-button/paper-icon-button.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
</style>
<template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Per #Stefanvott on the Polymer Slack site:
There are at least two ways:
Use the following custom element https://customelements.io/philya/font-awesome-polymer-icons/ (Didn't work for me.)
Do this <paper-icon-button src="" class="fa fa-github-alt fa-lg"></paper-icon-button> per this jsBin. See below code.
Short version http://jsbin.com/hubonatopa/1/edit?html,output
paper-icon-button.fa {
padding: .5em;
height: 2em;
width: 2em;
}
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
Full version http://jsbin.com/hubonatopa/1/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<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-icon-button/paper-icon-button.html" rel="import">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> </head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
paper-icon-button.fa {
padding: 10px;
line-height: 1em;
overflow: hidden;
}
</style> <template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
You can use this project! It's cool, bower package to use in polymer 1-2. Now it's last version of FA: 4.7. Here: https://github.com/vangware/fontawesome-iconset
in my case, on polymer v1.8 i had to create a custom style element as described in this link , paste font-awesome css there and then add it to my element using
<template>
<style include="shared-styles">
</style>
<paper-button> <i class="fa fa-facebook fa-lg"></i></paper-button>
..............
</template>
<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
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>
I am starting to use Polymer 1.0: the only thing I tried is a simple template like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"></link>
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" hidden="{{!star}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name:String,
star:Boolean
}
});
</script>
<pres-test name="withStar" star>
<h1>Example1:</h1>
<img src="http://placekitten.com/g/200/180" alt="image"></img>
</pres-test>
<pres-test name="withoutStar">
<h2>Example:</h2>
<img src="http://placesheen.com/100/100"></img>
<p>No star icon :()</p>
</pres-test>
</body>
</html>
This code works fine on Chrome and Opera, except that even if I don't put the boolean star in pres-test, it still shows the star.
In Firefox and IE, it just shows the h1 and img in the pres-test.
In Safari it seems that it doesn't understand the tags like dom-module, template or pres-test, since it first displays what is in the dom-module, then what is in pres-test, without adapting to the variables.
I looked for the compatibility of Polymer, but I only found it for the version 0.5.
Am I doing something wrong, or is it just not compatible with these browsers?
Only Chrome supports having custom element definitions inline in your main document. Other browsers currently do not have full and proper implementations of the new and upcoming standard.
Take the pres-test element definition and move it into its own HTML file, then import it.
Also, you only need to import one of the webcomponents.js polyfills - and for Polymer 1.0, you'll want to use webcomponents-lite.js.
All said and done you'll have two files:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="pres-test.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<pres-test name="withStar" star>
<h1>Example1:</h1>
<img src="http://placekitten.com/g/200/180" alt="image"></img>
</pres-test>
<pres-test name="withoutStar">
<h2>Example:</h2>
<img src="http://placesheen.com/100/100"></img>
<p>No star icon :()</p>
</pres-test>
</body>
</html>
pres-test.html:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/iron-icons/iron-icons.html">
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" style$="{{getStarStyle(star)}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name: {
type: String
},
star: {
type: Boolean,
value: false
}
},
getStarStyle: function(star) {
return star ? '' : 'display: none';
}
});
</script>