Polymer 将纸张选项卡与霓虹灯动画页面结合使用

是否可以使用纸张选项卡在霓虹灯动画页面之间切换？我在博客上写了下面的代码，根据教程应该可以工作，但是，它没有

...  
  <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>

。。。
福
酒吧
巴兹
福
酒吧
巴兹

我尝试使用从应用程序标题中的纸标签到neon动画页面的数据绑定，是否仍然需要一些js

提前感谢，

---

Stefan

正如我所看到的，问题是只需单击选项卡，它不会触发路由更改，所以它不会选择所需的页面。您可以使用

纸张选项卡

元素中的链接触发此路线更改。从：

若要在选项卡中使用链接，请将“链接”属性添加到“图纸”选项卡，并在“图纸”选项卡中放置tabindex为-1的元素

下面是一个完整的例子：

<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>

：主持人{
显示：块；
}
纸张标签{
背景颜色：灰色；
--纸张选项卡选择栏颜色：白色；
}
纸张标签[链接]a{
@应用（--水平布局）；
@应用（--布局中心）；
颜色：白色；
文字装饰：无；
}
.第页{
宽度：100vw；
高度：50vh；
颜色：黑色；
字体大小：36px；
文本对齐：居中；
垂直对齐：中间对齐；
线路高度：50vh；
}
.p1{
背景颜色：黄色；
}
.p2{
背景色：红色；
}
.p3{
背景色：青色；
}
福
酒吧
巴兹
聚合物({
是：“我的应用程序”，
特性：{
选项卡：{
类型：字符串，
reflectToAttribute:true，
观察家:"禁忌改变"
}
},
观察员：[
“_RouteTable已更改（data.tab）”
],
_tabChanged:函数（tab）{
console.log（'选项卡更改：'+选项卡）；
},
_routeTabChanged:函数（选项卡）{
this.tab=tab | |‘foo’；
},
});

正如我所看到的，问题是只需单击选项卡，它不会触发路由更改，所以它不会选择所需的页面。您可以使用

纸张选项卡

元素中的链接触发此路线更改。从：

若要在选项卡中使用链接，请将“链接”属性添加到“图纸”选项卡，并在“图纸”选项卡中放置tabindex为-1的元素

下面是一个完整的例子：

<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>

：主持人{
显示：块；
}
纸张标签{
背景颜色：灰色；
--纸张选项卡选择栏颜色：白色；
}
纸张标签[链接]a{
@应用（--水平布局）；
@应用（--布局中心）；
颜色：白色；
文字装饰：无；
}
.第页{
宽度：100vw；
高度：50vh；
颜色：黑色；
字体大小：36px；
文本对齐：居中；
垂直对齐：中间对齐；
线路高度：50vh；
}
.p1{
背景颜色：黄色；
}
.p2{
背景色：红色；
}
.p3{
背景色：青色；
}
福
酒吧
巴兹
聚合物({
是：“我的应用程序”，
特性：{
选项卡：{
类型：字符串，
reflectToAttribute:true，
观察家:"禁忌改变"
}
},
观察员：[
“_RouteTable已更改（data.tab）”
],
_tabChanged:函数（tab）{
console.log（'选项卡更改：'+选项卡）；
},
_routeTabChanged:函数（选项卡）{
this.tab=tab | |‘foo’；
},
});

@stefanmuke你有机会查看我的解决方案吗？@stefanmuke你有机会查看我的解决方案吗？