Use Paper-tabs in combination with Neon animated Pages

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><a href="/foo" tabindex="-1">Foo</a></paper-tab>
        <paper-tab name="bar" link><a href="/bar" tabindex="-1">Bar</a></paper-tab>
        <paper-tab name="baz" link><a href="/baz" tabindex="-1">Baz</a></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>