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

如何在聚合物中使纸张菜单按钮下拉列表透明？

1 个答案: