Question

我正在尝试动态创建Polymer FAB（https://elements.polymer-project.org/elements/paper-fab），如下所示：

var navFab = document.createElement("paper-fab");
console.log(navFab.mini)       // output false, which means it is defined
navFab.icon = "arrow-forward"; // this works
navFab.mini = true;            // this doesn't work
console.log(navFab.mini)       // output true
document.body.appendChild(navFab);

在屏幕上，navFab按钮是正常尺寸而不是迷你尺寸。我在它旁边放了一个标准尺寸的图标来比较。这让我感到困惑：s

Answer 1

paper-fab元素使用mini来添加样式（宽度，高度= 40px），~~这就是为什么以后无法通过更改属性来调整大小（更改不会自动反映到抓住的风格）。~~ 改变迷你使用setAttribute。

您还可以通过直接或使用类修改其宽度和高度来调整paper-fab的大小。

Live example

<style>
  .small {
    width: 25px;
    height: 25px;
  }
</style>
<paper-fab icon="add"></paper-fab>
<script>
  var fab = document.querySelector('paper-fab');
  fab.addEventListener('tap', function(){
    if( fab.classList.contains('small') ) {
      fab.classList.remove('small');
    } else {
      fab.classList.add('small');
    }
  });
</script>

A note on styling：父页面中的规则具有比以下更高的特异性：元素中定义的主机规则，但特异性低于在主机元素上定义的样式属性。

聚合物：如何动态改变纸张尺寸

1 个答案: