@ppci/source-list-item

Source List Item

A source list item containing an avatar, title and a description.

Table of contents

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

Installation

NPM

  npm i @ppci/source-list-item

Usage

Javascript

import '@ppci/source-list-item'

Browser

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

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


<source-list-item
   image="String"
   title="String"
   description="String"
   categoryId="Number"
  energySubType="String">
></source-list-item>

Theme | Styling

source-list-item {
  --icon-color: white;
  --icon-background-color: gray;

   /*
    * Category color by id
    * 1: local
    * 2: social
    */
  --1-color: #32b4e9;
  --2-color: #ffa800;

  --icon-sun: '\\e9d4';
  --icon-wind: '\\e9c1';
  --icon-water: '\\e90b';
}

Properties

Property	Type	Description	Possible Values
image	String	Image path of the source
*Tile*	String	Name of the source.
description	String	You can pass the city for example or something else related to the source.
categoryId	String
energySubType	String		SUN | WIND | WATER

Events

Name	Description	Detail / Payload