如何在 Polymer 1.0 中声明一个属性以将 css class 添加到我的 custom-element

Question

我制作了一张 custom-element 这是一张带有一些标题的简单卡片。问题是，我不知道如何声明属性会添加 css class 以使每张卡之间的 background-image url 不同。

我喜欢 Polymer，我可以创造伟大的东西，但我的极限是 javascript 的小知识，所以请帮忙？这是一些代码 =)

<dom-module id="gallery-card">
 <template>

 <style>
  :host {
  display: block;
  }
  .container{
  height: 50px;
  }
  .card{
  width: 98%;
  height: 98%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  }
/* Classes to add*/
  .card.project_1{
  background-image: url(../img/project01.jpg);
  }
  .card.project_2{
  background-image: url(../img/project02.jpg);
  }
  .card.project_3{
  background-image: url(../img/project03.jpg);
  }
  paper-ripple{
  color: #1936ce;
  }
  #caption {
  width: 50%;
  height: 80px;
  background-color: #0c0c0c;
  overflow: hidden;
  }
 </style>

 <div class="container">
  <div class="card">
   <paper-ripple centers></paper-ripple>
   <div id="caption">
    <h1>{{title}}</h1>
    <h2>{{description}}</h2>
   </div>          
  </div>
 </div>
</template>


<script>
// element registration
Polymer({
is: "gallery-card",

properties:{
  title: String,
  description: String,
}
});
</script>
</dom-module>

我该怎么办，带上我的卡片，让它们与众不同？

Answer 1

在 card div 上使用计算绑定，例如：

<div class$="[[_computedClass(index)]]">

然后在您的 Polymer 元素中：

_computedClass(value) {
  return 'card project_' + value;
}

所以理想情况下你会有这样的东西：

<template is="dom-repeat" items="[[cards]]">
   <div class$="[[_computedClass(index)]]">
   <paper-ripple centers></paper-ripple>
   <div id="caption">
    <h1>{{title}}</h1>
    <h2>{{description}}</h2>
   </div>          
  </div>
</template>

See the docs.

如何在 Polymer 1.0 中声明一个属性以将 css class 添加到我的 custom-element

How to declare a property that will add a css class to my custom-element in Polymer 1.0

polymer-1.0

custom-element

如何在 Polymer 1.0 中声明一个 属性 以将 css class 添加到我的 custom-element

How to declare a property that will add a css class to my custom-element in Polymer 1.0

polymer-1.0

custom-element

如何在 Polymer 1.0 中声明一个属性以将 css class 添加到我的 custom-element