@ppci/source-overview

Source Overview

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties

Installation

NPM

npm i @ppci/source-overview

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

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...