紙紋防止點擊容器元素，不適合

這是部分代碼，我很困擾。紙紋防止點擊容器元素，不適合

<core-toolbar id="main-toolbar" horizontal layout> 
    <core-icon-button icon="menu" class="bottom" core-drawer-toggle> 
     <paper-ripple class="recenteringTouch" fit></paper-ripple> 
    </core-icon-button> 
    <div id="titulo" class="bottom" flex></div> 
    <paper-fab id="viva-close-button" icon="close" class="bottom" mini></paper-fab> 
</core-toolbar>

預期的行爲是紋波蔓延至核心圖標按鈕結束，只有這個元素，再加上，嗯，應該切換菜單抽屜。它確實工作沒有波紋，但與它innit只是崩潰和燒傷。

漣漪走到所有工具欄長，似乎也阻止菜單圖標接收點擊事件，並不會觸發任何操作。
這一切都發生在菜單項上，但它們有點複雜（在我的情況下，至少因爲我擴展了它的功能），所以我決定給抽屜按鈕一試。

編輯
代碼工作：

<paper-icon-button role="button" icon="menu" relative core-drawer-toggle> 
     <paper-ripple class="recenteringTouch circle" fit></paper-ripple> 
    </paper-icon-button>

完全不需要擺弄。 peper-icon-button就像一個魅力。

來源

2014-12-04 Caio Wilson

您使用的fit佈局屬性等同於使用top/right/bottom/left: 0設置position: absolute。如explained in the docs所示，這會調整元素的大小，以便使用position: relative集填充第一個父元素。既然你想它來填充你的<core-icon-button>，你可以設置該position: relative，如下圖所示（使用relative屬性，這是另一種快捷方式，聚合物定義）：

<!doctype html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Polymer Demo</title> 
 
    </head> 
 
    <body> 
 
    <script src="//www.polymer-project.org/webcomponents.js"></script> 
 
    <link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-icon-button/core-icon-button.html"> 
 
    
 
    <template is="auto-binding"> 
 
     Positioned: 
 
     <core-icon-button relative icon="menu" on-tap="{{alertTap}}"> 
 
     <paper-ripple fit></paper-ripple> 
 
     </core-icon-button> 
 
    </template> 
 
    
 
    <script> 
 
     document.querySelector('template').alertTap = function(e) { 
 
     console.log('Tapped!', e); 
 
     }; 
 
    </script> 
 
    </body> 
 
</html>

此示例還顯示通過<core-icon-button>上的處理程序處理tap事件。

但是...爲什麼不使用<paper-icon-button>呢？聽起來你正在複製很多功能，我不確定它的好處。

來源

2014-12-04 19:47:47

或者只是使用'relative'屬性 – Pajn 2014-12-04 20:08:36

好點。調整來做到這一點。 – 2014-12-04 20:30:36

謝謝。它的效果比片段中的效果還要好。謝謝。我已經閱讀過很多次文檔，但是你可能知道它們總是在變化。 ps：你可以提高答案，這是相當豐富和有用的。我做到了。 – 2014-12-06 00:58:31

紙紋防止點擊容器元素，不適合

回答

相關問題