1.3.5 • Published 4 years ago
@ppci/custom-card v1.3.5
Card
Table of contents
Installation
NPM
npm i @ppci/custom-card
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci/custom-card'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-button/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-button/builds/legacy.min.js" />
<!-- Component -->
<custom-card
sourceId=${String}
title=${String}
subtitle=${String}
description=${String}
imageUrl=${String}
.sourceMix=${Object}
@card-click=${Function}
?hoverEffect=${Boolean}
>
<div>Add additional slotted content here</div>
</custom-card>
Styling
We have a predefined powerpeers theme ready for you! Just add the theme-powerpeers boolean attribute to your custom-card.
<custom-card
theme-powerpeers>
</custom-card>
Not completely satisfied with our powerpeers theme? Well you can do it yourself. We have a set of css variables available for you.
custom-card {
--theme-card-background: white;
--theme-border-radius: 4px;
}
Properties
Events
1.3.5
4 years ago
1.3.4
4 years ago
1.3.3
4 years ago
1.3.2
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.7
5 years ago
1.2.6
5 years ago
1.2.5
5 years ago
1.2.4
5 years ago
1.2.3
5 years ago
1.2.2
5 years ago
1.2.0
5 years ago
1.1.11
5 years ago
1.1.10
5 years ago
1.1.9
5 years ago
1.1.8
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.3
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago