聚合物1.x：造紙廠高程不起作用？

In this jsBin，我正在嘗試爲我的元素添加paper-fab。聚合物1.x：造紙廠高程不起作用？

我希望看到對應於elevation屬性的陰影。但相反，我看不到任何影子。所有的高程似乎都有相同的陰影（隱含的z深度）。

是我的代碼或元素的問題？

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>

來源

2016-03-02 Mowzer

我看來像與元素的問題。在documentation中，聽起來好像它可以按照你的意圖使用。

此元素的z深度，從0-5。設置爲0，將刪除的影子，每增加大於0的數字會比過去的

「更深的」但隨後elevation屬性是隻讀的，所以設置它沒有任何效果。

來源

2016-03-02 07:38:55 Maria

paper-fab實施paper-button-behavior。由於@Maria提到elevation只返回結果高程，它是隻讀的，不能設置。

你可以嘗試添加屬性像raised（？），focused（？），disabled（0），active（4），pressed（4），receivedFocusFromKeyboard（3）應moify高度，但似乎所有這些都是支持（如果有的話）。

來源

2016-03-02 08:09:38

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

來源

2016-03-02 19:08:25 Mowzer

聚合物1.x：造紙廠高程不起作用？

回答

相關問題