Polymer 1.x：造纸厂海拔不工作？答案

【问题标题】：Polymer 1.x: paper-fab elevation not working?Polymer 1.x：造纸厂海拔不工作？
【发布时间】：2016-03-02 07:27:29
【问题描述】：

In this jsBin，我正在尝试将paper-fab 添加到我的元素中。

我希望看到与elevation 属性对应的阴影。但相反，我看不到阴影。所有高程似乎都有相同的阴影（隐含的 z 深度）。

是我的代码有问题还是元素有问题？

http://jsbin.com/corisahoqi/edit?html，输出

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

【问题讨论】：

标签： polymer polymer-1.0 paper-elements

【解决方案1】：

在我看来元素有问题。在documentation 中，听起来好像可以按照您的意愿使用。

此元素的 z 深度，从 0 到 5。设置为 0 会去除阴影，大于 0 的每一个递增的数字都会比上一个“更深”

但是elevation属性是只读的，所以设置它没有效果。

【讨论】：

【解决方案2】：

paper-fab 实现了paper-button-behavior。正如@Maria 提到的elevation 只返回结果高度，它是只读的，不能设置。

您可以尝试添加raised (?)、focused (?)、disabled (0)、active (4)、pressed (4)、receivedFocusFromKeyboard (3) 等属性这应该会改变海拔，但这似乎是所有支持的（如果有的话）。

【讨论】：

【解决方案3】：

I just found this issue report which confirms @Maria's answer.

因此，作为补丁，I am adding the following CSS code (jsBin) 在悬停时添加阴影以模拟material design elevation spec here。

按钮高度。凸起按钮的默认高度为 2dp。在桌面上，凸起的按钮可以在悬停时获得此高度。

paper-fab:hover {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
}

http://jsbin.com/hitororuja/edit?html，输出

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

【讨论】：