wired-listbox | Vaadin

A listbox control with Wired hand-drawn styling. The selected item is highlighted. Can be vertical (default) or horizontal.

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

wired listbox

wired-listbox

A listbox control with Wired hand-drawn styling. The selected item is highlighted. Can be vertical (default) or horizontal.

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

Learn about web components here.

Usage

Add wired-listbox to your project:

npm i wired-listbox

Import wired-listbox definition into your HTML page:

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

Or into your module script:

import { WiredListbox } from "wired-listbox"

Use it in your web page:

<wired-listbox>
  <wired-item value="one" text="No. one"></wired-item>
  <wired-item value="two" text="No. two"></wired-item>
</wired-listbox>

<wired-listbox horizontal selected="two">
  <wired-item value="one" text="No. one"></wired-item>
  <wired-item value="two" text="No. two"></wired-item>
  <wired-item value="three" text="No. three"></wired-item>
</wired-listbox>

Properties

horizontal - Boolean indicated if the items are layed out horizontally. Default is false.

selected - Name of the selected item.

Custom CSS Variables

--wired-combo-item-selected-bg Background color of the selected item.

--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-listbox"#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-item#^0.1.1