Question

我正在尝试将paper-listbox中包含的paper-dropdown-menu的各个角落。但是，以下CSS不会像我期望的那样更改边框半径：

paper-listbox {
  border-radius: 14pt !important;
  --paper-listbox: {
    border-radius: 14pt;
    overflow: hidden;
  };
}

如何设置此border-radius的{{1}}？

屏幕截图：

Answer 1

<paper-dropdown-menu>的内部DOM看起来像这样：

  <paper-menu-button>
    <iron-dropdown>
      <div slot="dropdown-content" class="dropdown-content">
        <slot name="dropdown-content"></slot> <!-- user's slot content of paper-dropdown-menu is inserted here -->
      </div>
    </iron-dropdown>
  </paper-menu-button>

因此，此用户代码：

<paper-dropdown-menu>
  <paper-listbox slot="dropdown-content"> <!-- user's slot content -->
  </paper-listbox>
</paper-dropdown-menu>

成为：

<paper-dropdown-menu>
  <paper-menu-button>
    <iron-dropdown>
      <div slot="dropdown-content" class="dropdown-content">
        <paper-listbox>  <!-- user's slot content inserted -->
        </paper-listbox>
      </div>
    </iron-dropdown>
  </paper-menu-button>
</paper-dropdown-menu>

在<paper-menu-button>中，div.dropdown-content容器为styled，以显示框阴影（通过--shadow-elevation-2dp），使<div>的正方形边缘出现。您用来为<paper-listbox>设置样式的CSS的确为列表框设置了样式，但是您看到的正方形边缘实际上来自列表框的父级（div.dropdown-content）及其框阴影边缘。您可以使用--paper-menu-button-content混合来覆盖div.dropdown-content的样式，如以下步骤所示：

将一个类应用于您的<paper-dropdown-menu>：
```
<paper-dropdown-menu class="dropdown">
```

为设置--paper-menu-button-content的类创建样式：

<style>
  .dropdown {
    --paper-menu-button-content: {
      border-radius: 14pt;
    }
  }
</style>

window.addEventListener('WebComponentsReady', () => {
  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {
        customers: {
          type: Array,
          value: () => [
            'Alice',
            'Bob',
            'Charlie',
            'David',
          ]
        }
      };
    }
  }
  customElements.define(XFoo.is, XFoo);
});

<head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
  <script src="webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        .dropdown {
          --paper-menu-button-content: {
            border-radius: 14pt;
          }
        }
      </style>

      <paper-dropdown-menu id="customer"
                           class="dropdown"
                           placeholder="Select Customer">
        <paper-listbox id="customerList"
          slot="dropdown-content"
          attr-for-selected="value"
          selected="[[customer]]">
          <template is="dom-repeat" items="[[customers]]" as="customer">
            <paper-item value="[[customer]]">[[customer]]</paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>
    </template>
  </dom-module>
</body>

Answer 2

<paper-listbox>找到了用于设置元素样式的自定义属性：

Custom property                     | Description                   | Default 
------------------------------------|-------------------------------|-----------------------
`--paper-listbox-background-color`  | Menu background color         | `--primary-background-color`
`--paper-listbox-color`             | Menu foreground color         | `--primary-text-color`
`--paper-listbox`                   | Mixin applied to the listbox  | `{}`

--paper-listbox对于您的情况可能有用：

<dom-module id="x-app">
  <template>
    <style>
      :host {
          --paper-listbox: {
              border-radius: 14pt;
              border: solid 1px blue;
              /* you need to hide overflow */
              overflow: hidden;
          }
      }

      /* OR (if you have multiple listbox with different styles) */
      
      paper-listbox.radius {
          --paper-listbox: {
              border-radius: 14pt;
              border: solid 1px blue;
              overflow: hidden;
          }
      }
    </style>

    <paper-listbox class="radius">
      <paper-item>a</paper-item>
      <paper-item>b</paper-item>
      <paper-item>c</paper-item>
    </paper-listbox>
  </template>
</dom-module>

如何在“ paper-dropdown-menu”里面设置“ paper-listbox”的“ border-radius”？

2 个答案: