JSPM

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

Selectbox

Package Exports

  • @ppci/custom-select

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/custom-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 } }```