如何使聚合物中的紙張菜單按鈕下拉菜單透明？

Question

我想讓<paper-menu-button>的下拉菜單透明，但它不適用於我。我使用此代碼：

<paper-menu-button> 
    <paper-icon-button icon="menu" slot="dropdown-trigger"></paper-icon-button> 
    <paper-listbox slot="dropdown-content"> 
    <paper-item>Share</paper-item> 
    <paper-item>Settings</paper-item> 
    <paper-item>Help</paper-item> 
    </paper-listbox> 
</paper-menu-button> 

我試過--paper-menu-button-dropdown-background: rgba(255,255,255,.5);，但它不工作。

Answer 1

的<paper-listbox>默認情況下並在<paper-menu-button>的下拉菜單的背景之上不透明的，所以你必須做下列之一：

• 讓ListBox的背景透明，看看下面的顏色（儘管清除列表框覆蓋了按鈕圖標，這可能會使文本難以閱讀）。

  <dom-module id="x-foo"> 
      <template> 
      <style> 
       paper-listbox { 
       /* transparent to show bg of paper-menu-button underneath */ 
       --paper-listbox-background-color: transparent; 
       } 
  
       paper-menu-button { 
       --paper-menu-button-dropdown-background: rgba(0,0,255,.5); 
       } 
      </style> 
  

  demo

• 或列表框的背景色設置爲預期顏色：

  <dom-module id="x-foo"> 
      <template> 
      <style> 
       paper-listbox { 
       --paper-listbox-background-color: rgba(0,0,255,.5); 
       } 
      </style> 
  

  demo