0

我制作了一个自定义元素，它是一张简单的卡片，上面有一些标题。问题是，我不知道如何声明一个属性，该属性将添加一个 css 类以使每张卡之间的背景图像 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>

我应该怎么做，带上我的卡片并使它们彼此不同？

4

1 回答 1

0

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>

请参阅文档。

于 2015-09-13T06:18:51.720 回答