@ppci-mock/source-list

Source list

Usage no npm install needed!

<script type="module">
  import ppciMockSourceList from 'https://cdn.skypack.dev/@ppci-mock/source-list';
</script>

README

Source List

A grid of all available sources

Table of contents

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

Installation

NPM

npm i @ppci-mock/custom-input

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

Usage

Javascript

import '@ppci-mock/source-list'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/source-list/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/source-list/builds/legacy.min.js" />

<!-- Component -->
<source-list
  .sources=${Array}
  @load-more-click=${Function}
></source-list>

Styling

source-list {
  --grid-columns: 4;
  --grid--column-width: 1f;

  /* Responsive */
  @media (max-width: 600px) {
     --grid-columns: 2;
  }
}

Properties

Property Type Description Possible Values
*sources* Array Currently loaded sources ```javascript [ { "id":1," "name":"Mark Prince", "city":"Amsterdam", "image":"http://imageurl.com"/1.jpg, "description":"Powerpeers COO", categoryId":1, "deviceId":"1015", "status":"ACTIVE", "latitude":52.368, "longitude":4.9036, "website":null, "type":"SUN", "supply":9500, "start":"2016-04-10T00:00:00", "end":null, "soldOut":false, "weight":1 }, ] ```

Events

Name Description Payload
@load-more-click Load more button clicked