Update: This is very, very old. Check https://polymer-project.org for 2.0 and the new components.
This is for 0.5.5. It'll likely change for 0.8 (yet to be released). This is re-hash of the Polymer polycast videos on youtube by Rob Dodson for reference.
First create the below basic bower file.
{
"name": "your-app",
"version": "0.0.1",
"description": "",
"private": true,
"dependencies": {
}
}
Now the dependencies, which'll be added the the above file with the --save flag.
bower install --save Polymer/core-elements
bower install --save Polymore/more-routing
Let's assume this is your header and footer of the page, setting the app to not scale or zoom, and imports the webcomponents, more-routing and core-elements library (which will import polymer accordingly). (Note: Importing the whole core-elements is inefficient since it loads everything, but for testing it's fine)
<!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=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"> </script>
<link rel="import" href="bower_components/more-routing/more-routing.html">
<link rel="import" href="bower_components/core-elements/core-elements.html">
<style>
core-header-panel {
background-color: white;
}
a {
color: black;
text-decoration: none;
}
</style>
</head>
and then the footer
</html>
Now the body of the document looks like this. Explained below.
<body unresolved fullbleed fit layout vertical>
<template is="auto-binding" id="template">
<core-drawer-panel layout vertical>
<core-header-panel drawer>
<core-toolbar>
<span>Menu</span>
</core-toolbar>
<div> content </div>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div>{{title}}</div>
<span flex></span>
<core-icon-button icon="search"></core-icon-button>
</core-toolbar>
<div> main content </div>
</core-header-panel>
</core-drawer-panel>
</template>
</body>
<script>
window.addEventListener("polymer-ready", function(e) {
var tmpl = document.querySelector("#template");
tmpl.title = "Some title";
tmpl.addEventListener('template-bound', function(e) {
console.log("Template bound");
});
});
</script>
This now gives us the responsive drawer, basic templating and a toolbar. Now for the menu and pages.
Menu:
<core-menu selected="{{selected}}" valueattr="menuname">
<core-item menuname="one">One</core-item>
<core-item menuname="two">Two</core-item>
</core-menu>
We use a core-menu, which is has its selected attribute bound to a template variable (which we set in javascript initially and then use later). And we use the core-items within to have their menu name set by the menuname attribute (which we specify on the core-menu).
Pages:
<core-animated-pages selected="{{selected}}" valueattr="pagename">
<section pagename="one">
<div> Page one </div>
</section>
<section pagename="two">
<div> Page two </div>
</section>
</core-animated-pages>
The core-animated-pages will only show one of its sections, named by the pagename attribute (set by valueattr). We specify the selected page by the bound template variable, which the core-menu above will accordingly set. (Note: we use core-animated-pages since core-pages is broken for scrolling in some cases...)
So we now have a menu in our drawer that controls what page to show. Here's the full body code:
<body unresolved fullbleed fit layout vertical>
<template is="auto-binding" id="template">
<core-drawer-panel layout vertical>
<core-header-panel drawer>
<core-toolbar>
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{selected}}" valueattr="menuname">
<core-item menuname="one">One</core-item>
<core-item menuname="two">Two</core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div>{{title}}</div>
<span flex></span>
<core-icon-button icon="search"></core-icon-button>
</core-toolbar>
<core-animated-pages selected="{{selected}}" valueattr="pagename">
<section pagename="one">
<div> Page one </div>
</section>
<section pagename="two">
<div> Page two </div>
</section>
</core-animated-pages>
</core-header-panel>
</core-drawer-panel>
</template>
</body>
<script>
window.addEventListener("polymer-ready", function(e) {
var tmpl = document.querySelector("#template");
tmpl.title = "Some title";
tmpl.selected = "two"; // new
tmpl.addEventListener('template-bound', function(e) {
console.log("Template bound");
});
});
</script>
Now finally onto routing (to be placed in your head tag).
<more-routing-config driver="hash"></more-routing-config>
<more-route name="one" path="/one"></more-route>
<more-route path="/two">
<more-route name="two" path="/:name"></more-route>
</more-route>
This sets routing to a use a #!/name url scheme, sets two urls with the name 'one' and 'two' and accordingly named urls, and gives the 'two' route to take a param like /#!/two/somenamehere.
More-route-selector works cleverly with anything that extends core-selector, i.e. core-menu and core-pages. We can get rid of the valueattr stuff and just give each core-item and section withing core-pages a route attribute instead that is named after the routes defined above:
<more-route-selector>
<core-menu selected="0">
<core-item route="{{urlFor('one')}}">One</core-item>
<core-item route="{{urlFor('two', {name: 'sup'})}}">Two</core-item>
</core-menu>
</more-route-selector>
and the new core-pages:
<more-route-selector selectedParams="{{params}}">
<core-pages selected="0">
<section route="one">
<div> Page one </div>
</section>
<section route="two">
<div> Page two: {{params.name}} </div>
</section>
</core-pages>
</more-route-selector>
We're using the "0" selected attribute now, since the routes will be selecting the pages so we may as well just show the first menu/page initially. (We can also remove the tmpl.selected line in our javascript too).
The selectedParams line on more-router-selector gives us the attributes that were created in the urlFor method in the core-item above.
Now if we click on the menu, not only with the pages change, but the url will change too. And if we go to your_url#!/two it will go to the second page automatically.
Here's the final code for the body (remember to put the above more-routing stuff in your head tag):
<body unresolved fullbleed fit layout vertical>
<template is="auto-binding" id="template">
<core-drawer-panel layout vertical>
<core-header-panel drawer>
<core-toolbar>
<span>Menu</span>
</core-toolbar>
<more-route-selector>
<core-menu selected="0">
<core-item route="{{urlFor('one')}}">One</core-item>
<core-item route="{{urlFor('two', {name: 'sup'})}}">Two</core-item>
</core-menu>
</more-route-selector>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div>{{title}}</div>
<span flex></span>
<core-icon-button icon="search"></core-icon-button>
</core-toolbar>
<more-route-selector selectedParams="{{params}}">
<core-animated-pages selected="0">
<section route="one">
<div> Page one </div>
</section>
<section route="two">
<div> Page two: {{params.name}} </div>
</section>
</core-animated-pages>
</more-route-selector>
</core-header-panel>
</core-drawer-panel>
</template>
</body>
<script>
window.addEventListener("polymer-ready", function(e) {
var tmpl = document.querySelector("#template");
tmpl.title = "Some title";
tmpl.addEventListener('template-bound', function(e) {
console.log("Template bound");
});
});
</script>