JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q50930F
  • License ISC

Source list

Package Exports

  • @ppci/source-list-item

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ppci/source-list-item) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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-font-family: 'icomoon';
  --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