Polymerでpaper-menu-buttonドロップダウンを透明にするには？

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>のドロップダウンの背景の上にあるので、あなたは、次のいずれかを実行する必要があると思います：

• 下の色を見ることがリストボックスの背景を透明にしてください（クリアリストボックスはボタンアイコンをオーバーレイしますが、テキストが読みにくくなる可能性があります）。

  <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

• OR意図した色に、リストボックスの背景色を設定します。

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

  demo