Sourcemix item

Table of contents

Installation

NPM

npm i @ppci-mock/sourcemix-item

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

Usage

Javascript

import '@ppci-mock/sourcemix-item'

Browser

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

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

<!-- Component -->
<sourcemix-item
  id=${String}
  name=${String}
  city=${String}
  image=${String}
  icon=${String}
  deleteMode
></sourcemix-item>

Styling

sourcemix-item {
  --category-color: blue;
  --icon-color: white;
  --background-color: white;

  /* Dynamically generated icon variables based on available energy subtypes */
  --icon-wind: 'wind icon';
  --icon-sun: 'sun icon';
  --icon-water: 'water icon';
  ...etc

  /* Dynamically generated category color variables based on the available categories */
  --local-color: red;
  --social-color: blue;
  ...etc
}

Properties

Events