Polymer 1.0 binding properties to inline styles in template

Question

I would like to do something like this in polymer...

<dom-module id="logo-standard">
 <style>
:host {
  display: block;
}
</style>

<template>

<div class="logo-wrap">

  <div style="width: {{logoWidth}}px;">
    Some awesome logo
  </div>

</template>

<script>

(function() {

Polymer({
  is: 'logo-standard',

  properties: {

    logoWidth: {
      type: String,
      value: '400'
    }
  }

});
})();
</script>
</dom-module>

i.e. dynamically style an element using a property.

Is this possible? If so... how?

Dysplasia

Answer 1

This question has also been answered by me here

As of Polymer 1.2.0, you can now use Compound Bindings to

combine string literals and bindings in a single property binding or text content binding

like so:

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

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

and your example

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

so this is no longer an issue.

Uproar

I've been using 1.2 for a while but didn't know this... very helpful thanks – Dysplasia

Answer 2

In Polymer 1.0, you will need Computed Bindings to do this -

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

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

See this plunker for reference.

Squadron

Answer 3

In Polymer 1.0 they changed something that doesn't allow you to inline styles like that. You have to use a computed styles function and have it return the values you want.

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



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

Here is another post about this subject

Polymer 1.0 - Binding css classes

edit: i forgot the $

Concealment

Answer 4

Yes, but you need to create computed binding for that:

<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>

It will be possible to do without computed bindings when https://github.com/Polymer/polymer/issues/2182 is resolved, which seems to be in progress now.

Parasynapsis

Note that style$= will bind value to attribute, not just element property – Parasynapsis