@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/iron-behaviors @polymer/iron-menu-behavior @polymer/paper-styles

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 globular-mvc homeassistant-frontend-raceland hh-player-new hh-player-new.js hsos-flexible-form lsi-schedule-input intervention-pages @anviltech/wuf-poly-paper-elements @casper2020/casper-context-menu @biopolymer-elements/bio-pathways @biopolymer-elements/bio-interpro @api-components/authorization-panel @api-components/api-candidates-dialog @arkihillel/paper-chip @aspen-elements/paper-chip @doubletrade/lit-datatable @doubletrade/lit-datepicker @doubletrade/paper-datatable-api @doubletrade/range-datepicker @delawarepro/dlw-search-and-browse-extended @decooda/generic-questions @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 @fabricelements/skeleton-auth @fabricelements/fabric-imgix @hillelarki/paper-chip @hatiolab/things-shell @hegdemahesh/moonraft-ui-element-sidebar @hydrofoil/hydrofoil-paper-shell @firefly-elements/firefly-name-multiselect @firefly-elements/firefly-tags @fluidnext-polymer/paper-pagination @flowingcode/fc-applayout @jasoftware/jas-context-menu etools-file f-language-select firebase-autoform fhir-location-operationalstatus oe-combo oe-data-table oe-hierarchy-component oe-paper-chip oe-side-nav oe-workflow-ui-components oe-ui-misc nodecg-twitchie mudithaa-phone-number-formatter micro-fabric-ux paper-chip paper-time-input paper-pagination pk-bonnie-testmeasure pk-ecqm-header pk-ecqm-login test-contact-dialog spinner-element skyeditor test-pk-ecqm-grid veltec-multi-video wysiwyg-e-fork wysiwyg-e-nofont @advanced-rest-client/rest-api-menu @advanced-rest-client/project-requests-list @advanced-rest-client/projects-menu @advanced-rest-client/arc-view-settings-panel @01ht/ht-elements-catalog @01ht/ht-elements-item @lrnwebcomponents/eco-json-schema-form @lrnwebcomponents/elmsln-apps @lucentray/pine-web-components @logo-elements/pagination @lrnwebcomponents/lrnapp-cis @lrnwebcomponents/lrndesign-contentsequencer @lrnwebcomponents/lrnsys-comment @lrnwebcomponents/select-menu @lrnwebcomponents/paper-icon-picker @longlost/app-inputs @longlost/app-shell @longlost/ezf-shared @lit-any/components-paper-elements @pushkar8723/paper-dropdown

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago