Question

UPD：已解决

我有默认的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-panel 和 paper-header-panel

之间的CSS差异

P.S。我已经安装并导入了 paper-header-panel

问题是我不希望我的工具栏变高，然后在滚动时逐渐凝结（这就是为什么我尝试用纸头面板替换它），我希望它是总是浓缩（如使用 paper-header-panel 时的缝合模式，但在这种情况下，铁页不会起作用，这就是问题）。

问题是

如何使 paper-scroll-header-panel 始终精简，而不仅仅是向下滚动
或者，如果无法做到这一点，如何使用 paper-header-panel 替换它，并使其与<iron-pages>

Answer 1

找出解决方案。

对于那些有同样问题的人

将浓缩保留浓缩标题替换为已修复

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

像那样

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

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

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

1 个答案: