49 lines
1.5 KiB
HTML
49 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lit Example</title>
|
|
<!-- Import Lit via CDN -->
|
|
<script type="module" src="https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<script type="module">
|
|
import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
|
|
|
|
class FabCard extends LitElement {
|
|
@property({type: String}) imgSrc = '';
|
|
@property({type: String}) printingId = '';
|
|
@property({type: String}) cardName = '';
|
|
@property({type: String}) cardColor = '';
|
|
@property({type: String}) comment = '';
|
|
|
|
render() {
|
|
return html`
|
|
<div class="card ">
|
|
<div class="card-img">
|
|
<img class="single-card-img" src="${this.imgSrc}" alt="${this.cardName}">
|
|
</div>
|
|
<div class="card-details">
|
|
<span class="printing-id">${this.printingId}</span>
|
|
<span class="card-name">${this.cardName}</span>
|
|
<span class="card-color color-blue">${this.cardColor}</span>
|
|
<span class="comment">${this.comment}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('fab-card', FabCard);
|
|
</script>
|
|
|
|
<fab-card
|
|
imgSrc="http://localhost:8000/p/ROS154/w400"
|
|
printingId="ROS154"
|
|
cardName="Arcane Cussing"
|
|
cardColor="(Blue)"
|
|
comment=""
|
|
></fab-card>
|
|
</body>
|
|
</html> |