@ppci-test/custom-select

Dropdown

A dropdown

Table of contents

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

Installation

CDN

  <script type='module' src="http://developer.powerpeers.com/social/1.0.0/custom-select.js" />

NPM

  npm i @ppci/custom-select

Usage

// Javascript import
import '@ppci/custom-select'

<!-- or module import -->
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-select.js" />

const options =  [
  { label: 'Solar panel', value: '1' },
  { label: 'Wind', value: '2' },
];

<custom-select
  name="devices"
  label="Devices"
  placeholder="Select a device"
  options=${options}
  @click=${onClick}>
</custom-button>

Theme | Styling

custom-select {
}

Properties

Property	Type	Description	Possible Values
*name*	string	Name of the input field. Which could be used in a form as field identifier.	devices, source mixes, etc.
*label*	string	Label which is positioned above the dropdown	devices, source mixes, etc.
value	string	Active value of the dropdown
*options*	Array	Dropdown options	```javascript [ { label: 'Solar panel', value: '1' }, { label: 'Wind', value: '2' }, ] ```
disabled	boolean		```html ```
Theme
theme-powerpeers	boolean	Apply predefined powerpeers theme	```html ```

Events

Name	Description	Detail / Payload
@onChange	// Todo change to custom events	```{ target: ..., currentTarget: ..., ... }```
@onChangeDelayed	// Todo change to custom events	```{ target: ..., currentTarget: ..., ... }```
@onKeyUp	// Todo change to custom events	```{ target: ..., currentTarget: ..., ... }```

Changelog

1.0.0 ( Major )

• Initial version of the custom select.