CODEWITHSUNDEEP
polymer
martin karl
martin karl

Reputation: 48

Polymer: how to handle a style dynamically

Hey i'm trying to create a simple drag and drop. Is that possible to style an element dynamically. My code will be more explicit:

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="wireframe-view">
<template>
    <div on-tap="handleTap"
        style$=width:{{ width }}px; background-color:red;
     >Hello, World</div>    
</template>    


<script>    
    Polymer({
        is: "wireframe-view",
        handleTap: function() {
           this.width = 200;
        }
    });

</script>

This should change the width in my "style" propertie :/

Upvotes: 1

Views: 2622

Answers (2)

jptknta
jptknta

Reputation: 817

Here is a method for dynamically updating the style based on the value of a bound data attribute.

    <link rel="import" href="../bower_components/polymer/polymer.html">

    <dom-module id="conditional-css-example">

   <style>
     #tapContainer {
       width: 100px;
       background-color:white;
    }
     #tapContainer[data-tap-status$="tapped"] {
       width: 200px;
       background-color:red;
    }
   </style>

    <template>
        <div id="tapContainer" data-tap-status$="[[tapStatus]]" on-tap="handleTap">Tap Me!</div>    
    </template>    

    <script>    
        Polymer({
            is: "conditional-css-example",
            properties: {
              tapStatus: String;
            },
            handleTap: function() {
               this.tapStatus='tapped';
            }
        });    
    </script>

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

If the property value contains spaces quotes are required.

style$="width:{{ width }}px; background-color:red";

Upvotes: 4

Related Questions