Question

嘿，我正在尝试创建一个简单的拖放。是否可以动态设置元素的样式。我的代码会更明确：

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

这应该改变我的“风格”属性的宽度：/

Answer 1

如果属性值包含空格，则需要引号。

xmlns:userControls="clr-namespace:MyApp.WindowsPhone.UserControls"

Answer 2

这是一种根据绑定数据属性的值动态更新样式的方法。

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

Polymer：如何动态处理样式

2 个答案: