@ppci/custom-select

Dropdown

Table of contents

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

Installation

NPM

npm i @ppci/custom-select

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

Usage

Javascript

import '@ppci/custom-select'

Browser

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

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

<!-- Component -->
<custom-select
  name=${String}
  label=${String}
  value=${String}
  placeholder=${String}
  .options=${Array}
  @change=${Function}
  ?disabled=${Boolean}
></custom-button>

Properties

Property	Type	Description	Possible Values
*name*	string	Name of the input field. Which could be used in a form as field identifier.
*label*	string	Label which is positioned above the dropdown
value	string	Active value of the dropdown
placeholder	string	Placeholder text
*options*	Array	Dropdown options	```javascript [ { label: 'Solar panel', value: '1' } ] ```
disabled	boolean	Select field disabled state	true/false

Events

Name	Description	Payload
@change	Select field is changed	```{ ..., detail: { name: String, value: String } }```