Polímero - Menú desplegable de papel

El menú desplegable en papel es un menú desplegable simple, que funciona con contenido seleccionable. Puede utilizar este elemento en su aplicación, ejecutando los siguientes comandos para instalarlos en el directorio de su proyecto.

bower install --save PolymerElements/paper-dropdown-menu
bower install --save PolymerElements/paper-item
bower install --save PolymerElements/paper-listbox

Ejemplo

El siguiente ejemplo especifica el uso del elemento paper-dropdown-menu en Polymer.js. Cree un archivo index.html y agregue el siguiente código en él.

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

Ahora, abra el archivo my-app.html e incluya el siguiente código en él.

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

<dom-module id = 'my-app'>
   <template>
      <style is = "custom-style">
         paper-dropdown-menu {
            width:250px;
         }
         paper-dropdown-menu {
            height: 200px;
            display: block;
         }
      </style>
      
      <h3>Paper-Dropdown-Menu Example </h3>
      <paper-dropdown-menu>
         <paper-listbox class = "dropdown-content" selected = "1">
            <paper-item>Java Tutorial</paper-item>
            <paper-item>C Tutorial</paper-item>
            <paper-item>PHP Tutorial</paper-item>
            <paper-item>C++ Tutorial</paper-item>
         </paper-listbox>
      </paper-dropdown-menu>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Salida

Para ejecutar la aplicación, navegue hasta el directorio del proyecto creado y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page