将 Polymer 与 paper-toolbar 一起使用

Question

使用下面的布局。我无法将头像和注销按钮正确设置到屏幕右侧。看来我似乎无法弄清楚如何正确设置工具栏。

然而，在 paper-toolbar 上存在这个问题 github: Issue #6 也是一个问题所以我也必须手动设置工具栏的大小而不是使用内置的风格。

<body class="fullbleed layout vertical">
    <paper-drawer-panel>
        <paper-header-panel drawer>
            <paper-toolbar>
                <div><img src="my-image.png"></div>
            </paper-toolbar>
            <paper-menu id="mainMenu">
                <paper-item>One</paper-item>
                <paper-item>Two</paper-item>
            </paper-menu>
        </paper-header-panel>
        <paper-header-panel main>
            <paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                <div>My Title</div>
                <img src="my-avatar.png" aria-label="avatar" title="avatar" width="64px" height="64px"/>
                <a href="/logout" aria-label="Logout" title="Logout">Logout</a>
            </paper-toolbar>
            <div id="content">My content/div>
        </paper-header-panel>
    </paper-drawer-panel>
    </body>

注意：我还没有使用任何版本的 Polymer（包括新发布的 1.0）进行这项工作

Answer 1

我仍然不确定为什么它不起作用，但我从 Polymer Starter Kit 开始并获得了一个可用的工具栏。我只能认为我设置了一个错误的框架。

Answer 2

两件事 -

<div class="flex">My Title</div>
将此添加到您的 <head> <link rel="import" href="bower_components/paper-styles/paper-styles.html">

虽然可能不需要第二个，因为我相信 paper-toolbar 会自动导入纸张样式。

将 Polymer 与 paper-toolbar 一起使用

Using Polymer with paper-toolbar

css

polymer