Polymer Paper Listbox

by Online Tutorials Library July 14, 2022

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.

paper listbox

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:

paper listbox 1

Next TopicDrawer Panel

Polymer Paper Listbox

Polymer Paper Listbox

Example

Apache Pig UNION Operator

PostgreSQL BIGINT

You may also like