Question

我想在聚合物中做这样的事情......

<dimen name="material_drawer_item_primary_text">16sp</dimen>

即。使用属性动态设置元素样式。

这可能吗？如果是这样......怎么样？

Answer 1

here

也回答了这个问题

从Polymer 1.2.0开始，您现在可以使用Compound Bindings

在单个属性绑定或文本内容绑定中组合字符串文字和绑定

像这样：

<img src$="https://www.example.com/profiles/{{userId}}.jpg">

<span>Name: {{lastname}}, {{firstname}}</span>

和你的例子

<div style$="width: {{logoWidth}}px;">

所以这不再是问题 。

Answer 2

在Polymer 1.0中，您需要Computed Bindings来执行此操作 -

  <div style$="[[_computeWidth(logoWidth)]]">
    Some awesome logo
  </div>

  _computeWidth: function (width) {
      return 'width: ' + width + 'px' + ';color:red;';
  },

请参阅此plunker以供参考。

Answer 3

在Polymer 1.0中，他们改变了一些不允许你像这样内联样式的东西。您必须使用计算样式函数并让它返回您想要的值。

 <div style$="{{computeWidth}}">



 computeWidth: function () {
   return 'width:' + this.logoWidth + 'px;'
 }

这是关于这个主题的另一篇文章

Polymer 1.0 - Binding css classes

编辑：我忘记了$

Answer 4

是的，但您需要为此创建计算绑定：

<dom-module id="logo-standard">
    <style>
        :host {
            display : block;
        }
    </style>
    <template>
        <div class="logo-wrap">
            <div style$="[[logoStyle(logoWidth)]]">
                Some awesome logo
            </div>
    </template>
    <script>
        Polymer({
            is : 'logo-standard',

            properties : {

                logoWidth : {
                    type  : String,
                    value : '400'
                }
            },
            logoStyle  : function (logoWidth) {
                return 'width: ' + logoWidth + 'px';
            }
        });
    </script>
</dom-module>

当解决https://github.com/Polymer/polymer/issues/2182时，可以不使用计算绑定，现在似乎正在进行中。

Polymer 1.0绑定属性到模板中的内联样式

4 个答案: