@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 hh-player-new hh-player-new.js homeassistant-frontend-raceland hsos-flexible-form intervention-pages lsi-schedule-input @wcfactory/ui @vowo/fluid-form-elements @things-factory/process-modeller @things-shell/board-modeller @things-shell/real-modeller @unicef-polymer/etools-data-table @unicef-polymer/etools-dropdown @unicef-polymer/etools-file @unicef-polymer/etools-filters @things-real/shell @tpluscode/paper-autocomplete @things-factory/modeller-ui @teipublisher/pb-components add-measure @01ht/ht-elements-catalog @01ht/ht-elements-item @advanced-rest-client/project-requests-list @advanced-rest-client/projects-menu @advanced-rest-client/rest-api-menu @advanced-rest-client/arc-view-settings-panel @haxtheweb/elmsln-apps @haxtheweb/lrnsys-comment @hatiolab/things-shell @haxtheweb/select-menu test-contact-dialog @biopolymer-elements/bio-interpro @biopolymer-elements/bio-pathways @casper2020/casper-context-menu @logo-elements/pagination @longlost/app-inputs @longlost/app-shell @longlost/ezf-shared @lit-any/components-paper-elements @neogrup/nc-combo @mistio/mist-insights @mistio/polyana-dashboard @mistio/timerange-picker @pushkar8723/paper-dropdown @rwth-acis/las2peer-project-service-frontend @polymer/paper-swatch-picker 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 pk-bonnie-testmeasure pk-ecqm-header pk-ecqm-login skyeditor globular-mvc bwt-datatable crca-lit-datepicker contact-dialog ct-polymer-simple-text-menu @spriteful/asg-search @tadevel/paper-lazy-swatch-picker ecqm-add-measure ecqm-grid etools-file fhir-location-operationalstatus firebase-autoform f-language-select @smyd/asg-search @delawarepro/dlw-search-and-browse-extended @fabricelements/fabric-imgix @fabricelements/skeleton-auth @api-components/api-candidates-dialog

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

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago