Use Paper-tabs in combination with Neon animated Pages - polymer

Question

Is it possible to use paper-tabs to swich between neon-animated pages? I followed this blog post to write the following code that should work according to the tutorial, however, it doesn't.
...
<paper-tabs selected="{{data.tabName}}" attr-for-selected="key" sticky>
<paper-tab key='foo'>Foo</paper-tab>
<paper-tab key='bar'>Bar</paper-tab>
<paper-tab key='baz'>Baz</paper-tab>
</paper-tabs>
</app-header>
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}"></app-route>
<neon-animated-pages selected="{{data.tabName}}"
attr-for-selected="key"
entry-animation="slide-from-left-animation"
exit-animation="slide-right-animation">
<neon-animatable key='foo'> Foo </neon-animatable>
<neon-animatable key='bar'> Bar </neon-animatable>
<neon-animatable key='baz'> Baz </neon-animatable>
</neon-animated-pages>
I tried to use data-binding from paper-tabs in the app-header to neon-animatable-pages, is there still some js required?
Thanks in advance,
Stefan

Answer 1

As I see, problem is just by clicking on the tab it does not trigger route change so it wouldn't select the desired page. You could use links in the paper-tab elements to trigger this route change. From the docs:
To use links in tabs, add link attribute to paper-tab and put an element in paper-tab with a tabindex of -1.
So here is a complete example:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-right-animation.html">
<dom-module id="my-app">
<template>
<style>
:host {
display: block;
}
paper-tabs {
background-color: grey;
--paper-tabs-selection-bar-color: white;
}
paper-tab[link] a {
#apply(--layout-horizontal);
#apply(--layout-center-center);
color: white;
text-decoration: none;
}
.page {
width: 100vw;
height: 50vh;
color: black;
font-size: 36px;
text-align: center;
vertical-align: middle;
line-height: 50vh;
}
.p1 {
background-color: yellow;
}
.p2 {
background-color: red;
}
.p3 {
background-color: cyan;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:tab"
data="{{data}}"
tail="{{tail}}">
</app-route>
<div class="container">
<paper-tabs selected="{{tab}}" attr-for-selected="name">
<paper-tab name="foo" link>Foo</paper-tab>
<paper-tab name="bar" link>Bar</paper-tab>
<paper-tab name="baz" link>Baz</paper-tab>
</paper-tabs>
<neon-animated-pages selected="{{tab}}"
attr-for-selected="name"
entry-animation="slide-from-left-animation"
exit-animation="slide-right-animation">
<neon-animatable class="page p1" name="foo">Foo</neon-animatable>
<neon-animatable class="page p2" name="bar">Bar</neon-animatable>
<neon-animatable class="page p3" name="baz">Baz</neon-animatable>
</neon-animated-pages>
</div>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
tab: {
type: String,
reflectToAttribute: true,
observer: '_tabChanged'
}
},
observers: [
'_routeTabChanged(data.tab)'
],
_tabChanged: function(tab) {
console.log('tab changed: ' + tab);
},
_routeTabChanged: function(tab) {
this.tab = tab || 'foo';
},
});
</script>
</dom-module>