3.0.1 • Published 7 years ago

@polymer/paper-listbox v3.0.1

Weekly downloads
9,674
License
BSD-3-Clause
Repository
github
Last release
7 years ago

Published on NPM Build status Published on webcomponents.org

<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 propertyDescriptionDefault
--paper-listbox-background-colorMenu background color--primary-background-color
--paper-listbox-colorMenu foreground color--primary-text-color
--paper-listboxMixin 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
fundwave-fund-managementzagenzagen-productionplaytwo-core-cms-sections@vinay.jadhav/drop-downzagen-zagen@delawarepro/dlw-snb-with-dependencies@teipublisher/pb-components7executable_esm_aa_webcomponentsair_controlcontact-dialog2simple-material-table@phil-cd/frontendtest2@infinitebrahmanuniverse/nolb-_pol@everything-registry/sub-chunk-731test-pk-ecqm-gridwysiwyg-e-forkwysiwyg-e-nofontspinner-elementveltec-multi-videohh-player-newhh-player-new.jshomeassistant-frontend-racelandhsos-flexible-formintervention-pageslsi-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-componentsadd-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-menutest-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-pickermudithaa-phone-number-formattermicro-fabric-uxoe-paper-chipoe-side-navoe-workflow-ui-componentsoe-ui-miscoe-hierarchy-componentoe-data-tableoe-combopaper-paginationpaper-time-inputpaper-chipnodecg-twitchiepk-bonnie-testmeasurepk-ecqm-headerpk-ecqm-loginskyeditorglobular-mvcbwt-datatablecrca-lit-datepickercontact-dialogct-polymer-simple-text-menu@spriteful/asg-search@tadevel/paper-lazy-swatch-pickerecqm-add-measureecqm-gridetools-filefhir-location-operationalstatusfirebase-autoformf-language-select@smyd/asg-search@delawarepro/dlw-search-and-browse-extended@fabricelements/fabric-imgix@fabricelements/skeleton-auth@api-components/api-candidates-dialog
3.0.1

7 years ago

3.0.0

7 years ago

3.0.0-pre.26

7 years ago

3.0.0-pre.25

7 years ago

3.0.0-pre.24

7 years ago

3.0.0-pre.23

7 years ago

3.0.0-pre.22

7 years ago

3.0.0-pre.21

7 years ago

3.0.0-pre.20

7 years ago

3.0.0-pre.19

7 years ago

3.0.0-pre.18

7 years ago

3.0.0-pre.17

7 years ago

3.0.0-pre.16

7 years ago

3.0.0-pre.15

7 years ago

3.0.0-pre.14

7 years ago

3.0.0-pre.13

7 years ago

3.0.0-pre.12

8 years ago

3.0.0-pre.11

8 years ago

3.0.0-pre.10

8 years ago

3.0.0-pre.8

8 years ago

3.0.0-pre.7

8 years ago

3.0.0-pre.6

8 years ago

3.0.0-pre.4

8 years ago

3.0.0-pre.3

8 years ago

3.0.0-pre.2

8 years ago

3.0.0-pre.1

8 years ago

1.1.2-pre.3

9 years ago

1.1.2-pre.2

9 years ago

1.1.2-pre.1

9 years ago

0.0.4

9 years ago

0.0.3

10 years ago