Question

继续阅读之前：这是一个聚合物0.5 问题，在1.0发布后已被弃用。

我试图让工具栏始终显示在网络的顶部。然后，将容器拆分到核心抽屉面板中，但此元素始终显示在Web的顶部，覆盖工具栏。

使用聚合物设计师：我希望实现这样的目标：

desired layout

如果我从设计师那里得到代码，我有：

    <core-toolbar id="core_toolbar"></core-toolbar>
    <core-drawer-panel transition id="core_drawer_panel" touch-action>
      <section id="section" drawer></section>
      <section id="section1" main>
        <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
          <core-input id="core_input" flex></core-input>
        </core-field>
      </section>
    </core-drawer-panel>

但是如果我只是使用那个代码，那么核心抽屉就会隐藏工具栏，从而产生如下内容：

bad layout

关于如何＆＃34;移动＆＃34;核心抽屉面板，如果有工具栏？

请记住我不想在抽屉中设置工具栏 as in the example，但整个应用都需要一个工具栏。当然，我知道我可以通过使用CSS实现它，但我想知道我是否错误地设置了聚合物元素结构。

Answer 1

只需使用core-header-panel即可托管您的core-toolbar和core-drawer-panel。如您在示例中所示，它会阻止core-drawer-panel重叠core-toolbar。这是一个jsfiddle和剪切：

http://jsfiddle.net/kreide/ehwa3w1n/

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
core-header-panel {
  height: 100%;
}
[drawer] {
    box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
}

[main] {
    height: 100%;
    background-color: rgb(231, 238, 238);
}

＆＃13;

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">

<body fullbleed layout vertical>
    <core-header-panel flex>
        <core-toolbar>
          <div>Hello World!</div>
        </core-toolbar>
        <div class="content">
            <core-drawer-panel>
                <section drawer>Left</section>
                <section main>Right</section>
            </core-drawer-panel>
        </div>
    </core-header-panel>
</body>

＆＃13;

Answer 2

kreide的解决方案不适用于Polymer 1.0

要在1.0中粘贴纸质抽屉面板，请在抽屉标签上添加css style =“position：relative”。

聚合物布局工具栏+核心抽屉面板

2 个答案: