我制作了一个自定义元素,它是一张简单的卡片,上面有一些标题。问题是,我不知道如何声明一个属性,该属性将添加一个 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>
我应该怎么做,带上我的卡片并使它们彼此不同?