聚合物：纸图标按钮自定义图像混合

Question

我需要将纸图标按钮中的图像制作成圆形。所以我正在寻找是否有任何可用于自定义图像的混合。我在文档中找不到。

显示预期结果的屏幕截图：

欢迎任何其他优雅的解决方法。

Answer 1

没有任何 mixins 可以改变图像的边框半径，但您可以在 <dom-module> 中使用以下方式对其进行样式设置：

::content paper-icon-button img {
  border-radius: 50%;
}

HTMLImports.whenReady(_ => {
  Polymer({
    is: 'x-foo'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-icon-button {
          width: 100px;
          height: 100px;
        }
        ::content paper-icon-button img {
          border-radius: 50%;
        }
      </style>
      <paper-icon-button src="http://placekitten.com/300/300"></paper-icon-button>
    </template>
  </dom-module>
</body>

codepen

Answer 2

我无法使用最新的 Polymer1.0 (1.8.1) 中的 ::content 选择器访问 img 元素。定位它的方法是：

paper-icon-button::shadow #icon::shadow img {
  border-radius: 50%;
}

聚合物：纸图标按钮自定义图像混合

Polymer: paper-icon-button custom image mixin

mixins

polymer

paper-elements

polymer-1.0