Polymer Main Text显示在抽屉的顶部

时间:2015-06-08 19:49:53

标签: html polymer drawer

我再次使用聚合物,所以我在youtube的帮助下创建了一个基本的页面,但是打开抽屉时我总是遇到这个问题。

Image edited with Scenery (https://www.getscenery.com/)

正如您所见,菜单图标和“Polymer”标题来自底部工具栏。也许有人知道如何解决它。

谢谢:)

<body fullbleed layout vertical>

    <!-- Drawer -->
    <paper-drawer-panel>
        <!-- Inside the Drawer -->
        <div drawer>

            <!-- Drawer toolbar-->
            <paper-toolbar class="tall">
                <span>Menu</span>
            </paper-toolbar>



        </div>

        <!-- Main Content -->
        <div main class="main">

            <!-- Main toolbar -->
            <paper-toolbar>
                <paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
                <span class="flex">Polymer</span>

                <!-- Toolbar icons -->
                <paper-icon-button icon="refresh"></paper-icon-button>
                <paper-icon-button icon="search"></paper-icon-button>
            </paper-toolbar>

        </div>
    </paper-drawer-panel>
</body>

1 个答案:

答案 0 :(得分:2)

我稍微修改了你的代码。把它放在你的身体里:

<paper-drawer-panel>
          <paper-header-panel drawer>
            <paper-toolbar class="tall">
              <div>Menu</div>
            </paper-toolbar>

          </paper-header-panel>
          <paper-header-panel main>
            <paper-toolbar>
              <paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
              <div class="flex">Polymer</div>
              <paper-icon-button icon="refresh"></paper-icon-button>
              <paper-icon-button icon="search"></paper-icon-button>
            </paper-toolbar>
          </paper-header-panel>
        </paper-drawer-panel>