Бумажные вкладки с отображением ссылок

Question

Я пишу полимерный одностраничный веб-сайт, используя page.js, как и в стартовом наборе для полимера. Вместо использования бумажного меню для маршрутизации, я использую бумажные вкладки.

Так что маршрутизация работает и все такое, но я больше не могу заставить бумажные вкладки выглядеть как бумажные вкладки. Они просто выглядят как ссылки, а я не вижу панель выбора внизу.

Есть идеи, что я делаю не так?

index.html

<!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar" class="medium-tall">
      <!-- Application name -->
      <div class="app-name">Website</div>

      <span class="space"></span>

      <!-- Toolbar icons -->
      <paper-icon-button icon="refresh"></paper-icon-button>
      <paper-icon-button icon="search"></paper-icon-button>

      <!-- Application tabs -->
      <paper-tabs class="bottom" attr-for-selected="data-route" selected="[[route]]">
        <paper-tab link>
          <a data-route="home" href="{{baseUrl}}">
            <iron-icon icon="home"></iron-icon>
            <span>Home</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="artist" href="{{baseUrl}}artist">
            <iron-icon icon="home"></iron-icon>
            <span>Artist</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="teacher" href="{{baseUrl}}teacher">
            <iron-icon icon="home"></iron-icon>
            <span>Teacher</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="research" href="{{baseUrl}}research">
            <iron-icon icon="home"></iron-icon>
            <span>Research</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="contact" href="{{baseUrl}}contact">
            <iron-icon icon="mail"></iron-icon>
            <span>Contact</span>
          </a>
        </paper-tab>
      </paper-tabs>
    </paper-toolbar>

    <!-- Main Content -->
    <div class="content">
      <iron-pages attr-for-selected="data-route" selected="{{route}}">
        <section data-route="home">
          <paper-material elevation="1">
            <my-greeting></my-greeting>

            <p class="subhead">You now have:</p>
            <my-list></my-list>

            <p>Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p>
          </paper-material>
        </section>

        <section data-route="artist">
          <paper-material elevation="1">
            <h2 class="page-title">Users</h2>
            <p>This is the users section</p>
            <a href$="{{baseUrl}}users/Addy">Addy</a><br>
            <a href$="{{baseUrl}}users/Rob">Rob</a><br>
            <a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
            <a href$="{{baseUrl}}users/Sam">Sam</a>
          </paper-material>
        </section>

        <section data-route="teacher">
          <paper-material elevation="1">
            <h2 class="page-title">User: {{params.name}}</h2>
            <div>This is {{params.name}}'s section</div>
          </paper-material>
        </section>

        <section data-route="contact">
          <paper-material elevation="1">
            <h2 class="page-title">Contact</h2>
            <p>This is the contact section</p>
          </paper-material>
        </section>
      </iron-pages>
    </div>

Answer 1

Я думаю, что понял вашу проблему. При нажатии на вкладки они не сохраняют состояния щелчка и выбранной вкладки.

Этот ответ будет частично прояснить проблему Изменить URL в адресной строке после нажатия на элемент DOM с помощью javascript/jquery

В Polymer у меня такая же проблема, но с пунктами меню. Я думаю, что вы можете решить это следующим образом:

1). Используйте app-router вместо page.js и добавьте в него режим pushstate. mode='pushstate',

2). Включите pushstate-anchor к вашей странице, прежде чем включать app-router <link rel="import" href="../bower_components/pushstate-anchor/pushstate-anchor.html">, Это сохранит все ссылки и перезагрузки страницы не будет.