Question

是否可以使用纸张标签在霓虹动画页面之间切换？我按照this博客文章编写了以下应该按照教程工作的代码，但事实并非如此。

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

我尝试使用app-header中的paper-tabs到neon-animatable-pages的数据绑定，是否还需要一些js？

提前致谢，
斯蒂芬

Answer 1

正如我所看到的，问题只是点击选项卡，它不会触发路线更改，因此它不会选择所需的页面。您可以使用paper-tab元素中的链接来触发此路由更改。来自docs：

要使用标签中的链接，请将链接属性添加到纸张标签，并将一个元素放在纸张标签中，其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>

将纸张标签与霓虹动画页面结合使用

1 个答案: