用聚合物将纸制标签绑定到核心页面 [英] Binding Paper-Tabs to Core-Pages with Polymer
本文介绍了用聚合物将纸制标签绑定到核心页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Polymer创建一个使用纸张标签和核心页面的网站.我遇到的问题是，除非我特别选择要显示的页面，否则我似乎无法获得选项卡的click事件来影响所显示的页面，并且所有内容仍处于隐藏状态.
所以我真的只是希望选项卡的行为与选项卡的行为相同.
I'm building a site with Polymer that uses paper-tabs and core-pages. The problem I'm running into is that I can not seem to get the click event for the tabs to affect the pages being shown and all content remains hidden unless I specifically select which page I want shown.
So I really just want the tabs to behave the way tabs are supposed to behave.
到目前为止，这是我的代码:
Here is my code so far:
<body unresolved>
<paper-tabs selected="0" selectedindex="0" id="paper-tabs" >
<paper-tab id="paper-tab" active>ABOUT</paper-tab>
<paper-tab id="paper-tab1">PORTFOLIO</paper-tab>
<paper-tab id="paper-tab2">CONTACT</paper-tab>
</paper-tabs>
<core-pages selected="{{$.paper-tab.selected}} " selectedindex="0" notap id="core-pages">
<about-me id="paper-tab" active>
<h2 horizontal center-justified>Worldwide Jamie</h2>
<p>Jamie is a Chicago-based freelance front end web developer.</p>
<p>Clearly this website is <b>Under Development</b></p>
<p>Come back soon to see how great your site could be</p>
</about-me>
<portfolio-list id="portfolio">
<!--Insert slider?-->
</portfolio-list>
<contact-me id="contact">
</contact-me>
</core-pages>
</body>
</html>
在任何时间和任何情况下都表示感谢.
Thanks in advance for any time and consideration.
推荐答案
从Polymer 1.0+开始，这是您要使用的.
As of Polymer 1.0+, this is what you'll want to be using.
<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/iron-pages/iron-pages.html">
<paper-tabs selected="0">
<paper-tab>Tab One</paper-tab>
<paper-tab>Tab Two</paper-tab>
</paper-tabs>
<iron-pages selected="0">
<div>Page One</div>
<div>Page Two</div>
</iron-pages>
<script>
var pages = document.querySelector('iron-pages');
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('iron-select', function() {
pages.selected = tabs.selected;
});
</script>
这篇关于用聚合物将纸制标签绑定到核心页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
