Polymer Paper Listbox

In Polymer.js, paper-listbox is an easy-going listbox control which is combined with styling. It shows the selected items in bold text. It provides you multiple selection options and key bindings to navigate through the listbox.

Use the following command in your command prompt to get paper-listbox in your directory in working condition.

Example

Create an index.html file and add the following code in it to see the use of paper listbox element in Polymer.js.

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>   
   <body>    
      <my-app></my-app>
   </body>
</html>

Now, open my-app.html file and include the following code in it.

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-item/paper-item.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-listbox {
            width: 200px;
            border: 1px dotted #ccc;
         }
         paper-item {
            cursor: pointer;
         }
      </style>      
      <h3>Paper-Listbox Example </h3>
      <paper-listbox multi> 
         <paper-item>AngularJS Tutorial</paper-item>
         <paper-item disabled>C++ Tutorial</paper-item>
         <paper-item>C Tutorial</paper-item>
         <paper-item>Android Tutorial</paper-item>
      </paper-listbox>
   </template> 
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Output: