Polymer 1.x: paper-fab elevation not working?

1
votes

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>
3
polymerpolymer-1.0paper-elements

3 Answers

2
votes

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.

1
votes

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).

1
votes

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);
}

<!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>