Source Overview
Table of contents
Installation
NPM
npm i @ppci/source-overview
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjsUsage
Javascript
import '@ppci/source-overview'Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/source-overview/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/source-overview/builds/legacy.min.js" />
<!-- Component -->
<source-overview
rowSize=${Number}
rowsPerRequest=${Number}
deviceId=${String}
></source-overview>Styling
source-overview {
/* common */
--theme-border-radius: 4px;
/* grid */
--grid-columns: 2;
/* usage in media queries */
@media (min-width: 675px) {
--grid-columns: 4;
}
/* typo */
--theme-primary-h3-color: black;
--theme-primary-p-color: gray;
}Properties
| Property | Type | Description | Possible Values |
| rowSize | Number | Number of source per row | 1, 2, 3... |
| rowsPerRequest | Number | Load X amount of rows per request. For example when the user clicks the load more button X amount of rows are appended. | 1, 2, 3... |
| deviceId | String | If you want to work with one specific device id | 1, 2, 3... |