纸张选项卡选择栏未显示

时间:2015-06-04 08:04:09

标签: html layout tabs navigation polymer

我在纸卷轴标题面板中放了一个纸标签元素

但是,选择栏似乎无法正常工作。它默认情况下不显示,但是当我

  1. 导航至其他页面,然后返回主页

  2. 更改我的Chrome窗口的尺寸

  3. 选择栏回来了

    我已经找到了解决方案,并在paper-tabs定义中发现了一些关于 updateBar()的函数,当你需要刷新视图时必须调用它。

    即便如此,我也无法从页面布局元素

    中激活此函数

    请帮帮我......

    <dom-module id="page-layout">
         <link rel="stylesheet" href="styles.css">
         <link rel="import" href="imports.html">
         <link rel="import" href="page-content.html">
         <template>
             <paper-scroll-header-panel condenses keepCondensedHeader>
                <paper-toolbar class="tall">
                    <span class="flex"></span>
                    <paper-icon-button icon="refresh" 
                        onclick='location.reload()'>
                    </paper-icon-button>
                    <paper-icon-button icon="search"></paper-icon-button>
                    <div class="middle titleHead" >TMess</div>
                    <span class="flex bottom"></span>
                    <!--Navigation-->
                    <paper-tabs id="tabs" class="bottom" 
                                selected="0" noink noBar> 
                        <paper-tab>
                            <iron-icon icon="home" class="tabs"></iron-icon>
                            <span class="tabtext">Home</span>
                        </paper-tab>
                        <paper-tab>
                            <iron-icon icon="event" class="tabs"></iron-icon>
                            <span class="tabtext">Events</span>
                        </paper-tab>
                        <paper-tab>
                            <iron-icon icon="drafts" class="tabs"></iron-icon>
                            <span class="tabtext">Suggest</span>
                        </paper-tab>
                        <paper-tab>
                            <iron-icon icon="account-box" class="tabs">
                            </iron-icon>
                            <span class="tabtext">About Us</span>
                       </paper-tab>             
                    </paper-tabs>
                </paper-toolbar>
                <div class="content">
                    <page-content size="100"></page-content>
                </div>
            </paper-scroll-header-panel>
         </template>
    </dom-module>
    <script>
      Polymer({
          is: 'page-layout'
      });
    </script>
    <script>
        window.onload = function(){
            setNavigation();
    
        };
        function setNavigation(){
            var tabs = document.querySelector('#tabs');
            var content = document.getElementsByTagName('page-content')[0];
            var pages = content.getElementsByTagName('iron-pages')[0];
            tabs.addEventListener('iron-select', function(){
                pages.selected = tabs.selected;
            });
        }
    </script>
    

1 个答案:

答案 0 :(得分:0)

我有一个可以帮助你的黑客: tabs._onResize(); 这显示了Polymer 1.1中的选择栏,但我认为这不是一个好习惯,你应该在他们的存储库中提交一个bug。