Permalink
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> | |
| <title>Single page app using Polymer</title> | |
| <script src="/webcomponents.min.js"></script> | |
| <!-- vulcanized version of imported elements -- | |
| see "elements.html" for unvulcanized list of imports. --> | |
| <link rel="import" href="vulcanized.html"> | |
| <link rel="stylesheet" href="styles.css" shim-shadowdom> | |
| </head> | |
| <body unresolved fullbleed> | |
| <template is="auto-binding" id="t"> | |
| <core-scaffold id="scaffold"> | |
| <nav> | |
| <core-toolbar> | |
| <span>Single Page Polymer</span> | |
| </core-toolbar> | |
| <core-menu valueattr="hash" selected="{{route}}" on-core-select="{{menuItemSelected}}"> | |
| <template repeat="{{page, i in pages}}"> | |
| <paper-item hash="{{page.hash}}" noink> | |
| <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon> | |
| <a href="#{{page.hash}}">{{page.name}}</a> | |
| </paper-item> | |
| </template> | |
| </core-menu> | |
| </nav> | |
| <core-toolbar tool flex> | |
| <div flex></div> | |
| <core-icon-button icon="refresh"></core-icon-button> | |
| <core-icon-button icon="add"></core-icon-button> | |
| </core-toolbar> | |
| <div layout horizontal center-center fit> | |
| <core-animated-pages selected="{{route}}" valueattr="hash" | |
| transitions="slide-from-right"> | |
| <template repeat="{{page, i in pages}}"> | |
| <section hash="{{page.hash}}" layout vertical center-center> | |
| <div>{{page.name}}</div> | |
| </section> | |
| </template> | |
| </core-animated-pages> | |
| </div> | |
| </core-scaffold> | |
| </template> | |
| <script> | |
| var template = document.querySelector('#t'); | |
| template.pages = [ | |
| {name: 'Single', hash: 'one'}, | |
| {name: 'page', hash: 'two'}, | |
| {name: 'app', hash: 'three'}, | |
| {name: 'using', hash: 'four'}, | |
| {name: 'Polymer', hash: 'five'}, | |
| ]; | |
| template.menuItemSelected = function(e, detail, sender) { | |
| if (detail.isSelected) { | |
| this.$ && this.$.scaffold.closeDrawer(); | |
| } | |
| }; | |
| </script> | |
| </body> | |
| </html> |