CODEWITHSUNDEEP
polymerpolymer-1.0
markstewie
markstewie

Reputation: 9587

Polymer 1.0 binding properties to inline styles in template

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?

Upvotes: 9

Views: 3009

Answers (4)

Ryan White
Ryan White

Reputation: 2446

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.

Upvotes: 13

nazar-pc
nazar-pc

Reputation: 326

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.

Upvotes: 1

jimi dough10
jimi dough10

Reputation: 2016

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 $

Upvotes: 1

Justin XL
Justin XL

Reputation: 39006

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.

Upvotes: 2

Related Questions