Directory

← Back

wired-listbox

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

Author

Rating

Popularity

<100

[ 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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • wired-lib#^0.1.1
  • wired-item#^0.1.1
Released
2017-08-30
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

wired-listbox - Vaadin Add-on Directory

A listbox control with Wired hand-drawn styling. The selected item is highlighted. Can be vertical (default) or horizontal. wired-listbox - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/wiredjs/wired-listbox](https://github.com//wiredjs/wired-listbox/blob/v0.5.0/README.md) on 2019-05-22 ]** ![wired listbox](https://wiredjs.github.io/wired-elements/images/listbox.png) # 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](http://wiredjs.com/) Learn about web components [here](https://www.webcomponents.org/introduction). ## Usage Add wired-listbox to your project: ``` npm i wired-listbox ``` Import wired-listbox definition into your HTML page: ```html ``` Or into your module script: ```javascript import { WiredListbox } from "wired-listbox" ``` Use it in your web page: ```html ``` ### 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.
Online