Home | History | Annotate | Download | only in paper-listbox 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="../polymer/polymer.html">
     12 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
     13 <link rel="import" href="../paper-styles/default-theme.html">
     14 
     15 <!--
     16 Material design: [Menus](https://www.google.com/design/spec/components/menus.html)
     17 
     18 `<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item
     19 is highlighted, and the selected item has bolded text.
     20 
     21     <paper-listbox>
     22       <paper-item>Item 1</paper-item>
     23       <paper-item>Item 2</paper-item>
     24     </paper-listbox>
     25 
     26 An initial selection can be specified with the `selected` attribute.
     27 
     28     <paper-listbox selected="0">
     29       <paper-item>Item 1</paper-item>
     30       <paper-item>Item 2</paper-item>
     31     </paper-listbox>
     32 
     33 Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected,
     34 and multiple item can be selected.
     35 
     36     <paper-listbox multi>
     37       <paper-item>Item 1</paper-item>
     38       <paper-item>Item 2</paper-item>
     39     </paper-listbox>
     40 
     41 ### Styling
     42 
     43 The following custom properties and mixins are available for styling:
     44 
     45 Custom property | Description | Default
     46 ----------------|-------------|----------
     47 `--paper-listbox-background-color`   | Menu background color                                            | `--primary-background-color`
     48 `--paper-listbox-color`              | Menu foreground color                                            | `--primary-text-color`
     49 `--paper-listbox`                    | Mixin applied to the listbox                                        | `{}`
     50 
     51 ### Accessibility
     52 
     53 `<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will also have
     54 `aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and
     55 down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter
     56 of a listbox item will also focus it.
     57 
     58 @group Paper Elements
     59 @element paper-listbox
     60 @hero hero.svg
     61 @demo demo/index.html
     62 -->
     63 
     64 <dom-module id="paper-listbox">
     65   <template>
     66     <style>
     67       :host {
     68         display: block;
     69         padding: 8px 0;
     70 
     71         background: var(--paper-listbox-background-color, --primary-background-color);
     72         color: var(--paper-listbox-color, --primary-text-color);
     73 
     74         @apply(--paper-listbox);
     75       }
     76     </style>
     77 
     78     <content></content>
     79   </template>
     80 
     81   <script>
     82     (function() {
     83       Polymer({
     84         is: 'paper-listbox',
     85 
     86         behaviors: [
     87           Polymer.IronMenuBehavior
     88         ],
     89 
     90         hostAttributes: {
     91           role: 'listbox'
     92         }
     93       });
     94     })();
     95   </script>
     96 </dom-module>
     97