Combobox control - similar to a native browser select element; with a hand-drawn, wireframe like, style.

[ This description is mirrored from README.md at github.com/wiredjs/wired-combo on 2019-05-22 ]

wired combo

wired-combo

Combobox control - similar to a native browser select element; with a hand-drawn, wireframe like, style.

For demo and view the complete set of wired-elememts: wiredjs.com

Learn about web components here.

Usage

Add wired-combo to your project:

npm i wired-combo

Import wired-combo definition into your HTML page:

<script type="module" src="wired-combo/wired-combo.js"></script>

Or into your module script:

import { WiredCombo } from "wired-combo"

Use it in your web page:

<wired-combo selected="two">
  <wired-item value="one" text="Number one"></wired-item>
  <wired-item value="two" text="Number two"></wired-item>
  <wired-item value="three" text="Number three"></wired-item>
</wired-combo>
  
<wired-combo selected="one" disabled>
  <wired-item value="one" text="Number one"></wired-item>
  <wired-item value="two" text="Number two"></wired-item>
</wired-combo>

Properties

disabled - disables the combo selector. Default value is false.

selected - Name of the selected item.

Custom CSS Variables

--wired-combo-popup-bg Background color of the dropdown when combo selector is open.

--wired-combo-item-hover-bg Color of item in the dropdown on hover.

Events

selected event fired when an item is selected by the user.

Install

Link to this version
ImportedReleased 30 August 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save wiredjs/wired-combo"#0.2.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.2.0

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • wired-lib#^0.1.1
  • wired-card#^0.1.1
  • wired-item#^0.1.1