如何使用 Polymer 设置元素的高度？

Question

我创建了一个 Polymer 行为，该行为应该采用选定元素的宽度，并将其高度设置为 "ready" 上的宽度以及 window 调整大小时的宽度。我已经完成了 "get the width" 部分，但设置高度不起作用。这是代码：

<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
  SquareBehavior = {
    properties: {
      victim: Object
    },
    listeners: {
      'resize': 'squareIt' // not working
    },
    squareIt: function() {
      this.victim = this.$$('.round');
      console.log(this.victim.offsetWidth); // this works fine
      // what do I add here?
    },
    ready: function() {
      this.squareIt(); //works
    }
  };
</script>

Answer 1

您可能必须声明样式属性并将 reflect to 属性设置为 true

<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
  SquareBehavior = {
    properties: {
      victim: Object
      style: {
        type: String,
        reflectToAttribute: true
      }
    },
    listeners: {
      'resize': 'squareIt' // not working
    },
    squareIt: function() {
      this.victim = this.$$('.round');
      console.log(this.victim.offsetWidth); // this works fine
      // what do I add here?
      this.style = "{height: " + this.victim.offsetWidth + " }"
    },
    ready: function() {
      this.squareIt(); //works
    }
  };
</script>

Answer 2

您可以使用 iron-resizable-behavior。

https://github.com/polymerelements/iron-resizable-behavior

<html>
/*...*/
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
/*...*/

    Polymer({

        /*...*/

        listeners: {
            'iron-resize': "_resizeHandler"
        },

如何使用 Polymer 设置元素的高度？

How do I set an element's height with Polymer?

polymer

polymer-1.0