@polymer/paper-listbox NPM

<paper-listbox>

<paper-listbox> implements an accessible listbox control with Material Design styling. The focused item is highlighted, and the selected item has bolded text.

<paper-listbox>
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-listbox>

An initial selection can be specified with the selected attribute.

<paper-listbox selected="0">
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-listbox>

Make a multi-select listbox with the multi attribute. Items in a multi-select listbox can be deselected, and multiple item can be selected.

<paper-listbox multi>
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-listbox>

Styling

The following custom properties and mixins are available for styling:

Custom property	Description	Default
`--paper-listbox-background-color`	Menu background color	`--primary-background-color`
`--paper-listbox-color`	Menu foreground color	`--primary-text-color`
`--paper-listbox`	Mixin applied to the listbox	`{}`

Accessibility

<paper-listbox> has role="listbox" by default. A multi-select listbox will also have aria-multiselectable set. It implements key bindings to navigate through the listbox with the up and down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter of a listbox item will also focus it.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-listbox

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-listbox/paper-listbox.js';
    </script>
  </head>
  <body>
    <paper-listbox>
      <div role="option">item 1</div>
      <div role="option">item 2</div>
      <div role="option">item 3</div>
    </paper-listbox>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-listbox/paper-listbox.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-listbox>
        <div role="option">item 1</div>
        <div role="option">item 2</div>
        <div role="option">item 3</div>
      </paper-listbox>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-listbox
cd paper-listbox
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

web-components polymer listbox

@polymer/polymer @polymer/paper-styles @polymer/iron-behaviors @polymer/iron-menu-behavior

fundwave-fund-management zagenzagen-production playtwo-core-cms-sections @vinay.jadhav/drop-down zagen-zagen @delawarepro/dlw-snb-with-dependencies @teipublisher/pb-components7 executable_esm_aa_webcomponents air_control contact-dialog2 simple-material-table @phil-cd/frontendtest2 @infinitebrahmanuniverse/nolb-_pol @everything-registry/sub-chunk-731 test-pk-ecqm-grid wysiwyg-e-fork wysiwyg-e-nofont spinner-element veltec-multi-video @doubletrade/lit-datatable @doubletrade/lit-datepicker @doubletrade/paper-datatable-api @doubletrade/range-datepicker test-contact-dialog @anviltech/wuf-poly-paper-elements @api-components/api-candidates-dialog @api-components/authorization-panel @arkihillel/paper-chip @aspen-elements/paper-chip @advanced-rest-client/rest-api-menu @advanced-rest-client/project-requests-list @advanced-rest-client/projects-menu @advanced-rest-client/arc-view-settings-panel @biopolymer-elements/bio-interpro @biopolymer-elements/bio-pathways @casper2020/casper-context-menu @01ht/ht-elements-catalog @01ht/ht-elements-item @decooda/generic-questions @delawarepro/dlw-search-and-browse-extended @haxtheweb/lrnsys-comment @haxtheweb/select-menu @haxtheweb/elmsln-apps @hegdemahesh/moonraft-ui-element-sidebar @flowingcode/fc-applayout @hatiolab/things-shell @hillelarki/paper-chip @hydrofoil/hydrofoil-paper-shell @firefly-elements/firefly-tags @firefly-elements/firefly-name-multiselect @fluidnext-polymer/paper-pagination @logo-elements/pagination @lrnwebcomponents/lrnsys-comment @lrnwebcomponents/lrndesign-contentsequencer @lrnwebcomponents/lrnapp-cis @lucentray/pine-web-components @lrnwebcomponents/elmsln-apps @lrnwebcomponents/eco-json-schema-form @longlost/app-inputs @longlost/app-shell @longlost/ezf-shared @lrnwebcomponents/select-menu @lrnwebcomponents/paper-icon-picker @lit-any/components-paper-elements @neogrup/nc-combo @exmg/exmg-grid @exmg/exmg-paper-combobox @exmg/exmg-paper-datatable @exmg/exmg-paper-sidemenu @exmg/exmg-paper-token-input @exmg/exmg-searchbar @exmg/exmg-sidemenu @exmg/exm-grid @fabricelements/fabric-imgix @fabricelements/skeleton-auth @mistio/mist-insights @mistio/polyana-dashboard @mistio/timerange-picker @jasoftware/jas-context-menu @pushkar8723/paper-dropdown @rwth-acis/las2peer-project-service-frontend @polymer/paper-swatch-picker @nuxeo/nuxeo-ui-elements @nuskin/ns-form-elements @operato/color-picker @spriteful/asg-search @smyd/asg-search mudithaa-phone-number-formatter micro-fabric-ux oe-paper-chip oe-side-nav oe-workflow-ui-components oe-ui-misc oe-hierarchy-component oe-data-table oe-combo paper-pagination paper-time-input paper-chip nodecg-twitchie

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago