[英]Paper-tabs with links display issue
我正在使用 page.js 編寫聚合物單頁網站,就像在聚合物入門套件中一樣。 我沒有使用紙質菜單進行路由,而是使用紙質標簽。
所以路由是工作和一切,但我不能讓紙標簽看起來像紙標簽了。 它們只是看起來像鏈接,我看不到底部的選擇欄。
知道我做錯了什么嗎?
索引.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>
我想我明白你的問題了。 當您單擊選項卡時,它們不會保存單擊和選定選項卡的狀態。
這個答案將部分澄清問題Change URL in address bar after click on DOM element with javascript/jquery
在 Polymer 我有同樣的問題,但有菜單項。 我認為您可以通過以下方式解決它:
1)。 使用app-router代替 page.js 並向其添加 pushstate 模式mode='pushstate'
。
2)。 在包含 app-router <link rel="import" href="../bower_components/pushstate-anchor/pushstate-anchor.html">
之前,將 pushstate-anchor 包含到您的頁面中。 這將保存所有鏈接並且不會重新加載頁面。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.