如何在 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

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

How to make paper-menu-button dropdown transparent in Polymer?

javascript

css

web-component

polymer

polymer-2.x