首页 文章

聚合物 . 为什么<iron-pages>适用于<paper-scroll-header-panel>,但不适用于<paper-header-panel>

提问于
浏览
0

UPD: SOLVED

我有默认的Polymer Starter Kit(高级)布局,其结构如下所示

<template>
    <paper-drawer-panel id="paperDrawerPanel" force-narrow>
            <paper-header-panel drawer fixed>
                <paper-toolbar id="drawerToolbar">                    
                </paper-toolbar>

            <!-- Drawer Content --> 

             </paper-header-panel>

        <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
             <paper-toolbar id="mainToolbar" class="tall">
                <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
              <!-- Toolbar icons -->

                <div class="middle middle-container">
                <div class="app-name">appname</div>
              </div>
            </paper-toolbar>                       

            <div class="content">
             <iron-pages attr-for-selected="data-route" selected="{{route}}">

                <section>
                </section>

                <section>
                </section>

             </iron-pages>
           </div>   
         </paper-scroll-header-panel>
     </paper-drawer-panel>
</template>

但是当我尝试使用 paper-header-panel 而不是 paper-scroll-header-panel 时,所有 iron-pages 结构都消失了 . 我知道这是因为 paper-scroll-header-panelpaper-header-panel 之间的CSS差异而发生的

附:我安装并导入了 paper-header-panel

问题是我没有't want my toolbar to be tall and then gradually condense when you scroll (that'为什么我试图用纸质 Headers 面板替换它,我希望它总是浓缩(如使用 paper-header-panel 时的缝合模式,但在这种情况下,铁页不起作用,这是问题) .

问题是

  • 如何使 paper-scroll-header-panel 始终浓缩,而不是只在向下滚动时

  • 或者,如果不可能,我如何用 paper-header-panel 替换它并使其与 <iron-pages> 一起使用

1 回答

  • 0

    找出解决方案 .

    对于那些会遇到同样问题的人

    fixed 替换 condenses keep-condensed-header

    然后从工具栏中删除 class="tall"

    像那样

    <paper-scroll-header-panel main id="headerPanelMain" fixed>
            <paper-toolbar id="mainToolbar">
             ...
    

    它不会浓缩你将有工作 <iron-pages> 路线

相关问题