- Polymer Tutorial
- Polymer - Home
- Polymer - Overview
- Polymer - Installation
- Polymer - Elements
- Polymer - Custom Elements
- Polymer - Shadow DOM and Styling
- Polymer - Events
- Polymer - Data System
- Polymer Useful Resources
- Polymer - Quick Guide
- Polymer - Useful Resources
- Polymer - Discussion
Polymer - Paper Menu
Paper-menu is a simple ready-to-use menu that has Material Design styling. The selected item has bold text. This element has multiple selection options and key bindings to navigate through the listbox. To get paper-menu in your directory in working condition, you should run the following command in the command prompt.
bower install --save PolymerElements/paper-menu
Example
Your index.html file should look like the following.
<!doctype html> <html> <head> <link rel = 'import' href = 'my-app.html'> </head> <body> <my-app></my-app> </body> </html>
Your my-app.html file should look like the following.
<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>
Output
Refresh the Polymer server and following will be the output.
polymer_elements.htm
Advertisements