Question

我有paper-badge设置了图标属性。我可以更改徽章的大小，但我也想更改其中的图标大小。

我该怎么做？感谢

Answer 1

<paper-badge>目前不支持修改图标大小的CSS属性（hard-coded to 12x12）。但是，您可以通过选择徽章<iron-icon>并设置其style.width和style.height来更改JavaScript中图标的大小：

// template
<paper-badge id="badge"></paper-badge>

// script
const icon = this.$.badge.$$('iron-icon');
icon.style.width = '20px';
icon.style.height = '20px';

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    attached: function() {
      const icon = this.$.badge.$$('iron-icon');
      icon.style.width = '20px';
      icon.style.height = '20px';
    }
  });
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-badge/paper-badge.html">
  <link rel="import" href="iron-icons/iron-icons.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-badge {
          --paper-badge-margin-bottom: -40px;
        }
      </style>
      <div>
        <paper-button id="btn">Status</paper-button>
        <paper-badge id="badge" icon="favorite" for="btn" label="favorite icon"></paper-badge>
      </div>
    </template>
  </dom-module>
</body>

＆＃13;

如何在纸徽内设置铁图标尺寸？

1 个答案: