javascript - 如何在 Polymer 中使纸菜单按钮下拉透明？

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

• 或将列表框的背景颜色设置为预期的颜色:

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

  demo