Polímero - Menú Papel

Paper-menu es un menú simple listo para usar que tiene el estilo de Material Design. El elemento seleccionado tiene texto en negrita. Este elemento tiene múltiples opciones de selección y combinaciones de teclas para navegar por el cuadro de lista. Para que el menú de papel en su directorio funcione correctamente, debe ejecutar el siguiente comando en el símbolo del sistema.

bower install --save PolymerElements/paper-menu

Ejemplo

Su archivo index.html debería tener el siguiente aspecto.

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

Su archivo my-app.html debería tener el siguiente aspecto.

<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-menu/paper-menu.html">
<dom-module id = 'my-app'>
   <template>
      <style>
         .horizontal-section {
            padding: 15px;     
         }
         #paperitem {
            cursor: pointer;
            display: inline;      
            background: #ccc;
         }
      </style>
      
      <h3>Paper-Menu Example </h3>
      <div class = "horizontal-section">
         <paper-menu>
            <paper-item id = "paperitem">Home</paper-item>
            <paper-item id = "paperitem">About-Us</paper-item>
            <paper-item id = "paperitem">Contacts</paper-item>
            <paper-item id = "paperitem">Log-In</paper-item>
         </paper-menu>
      </div>        
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Salida

Actualice el servidor de Polymer y lo siguiente será el resultado.

↰ Previous page