使用聚合物与纸工具栏

使用如下布局。我没能把头像和注销按钮正确地放到屏幕的右边。我似乎不知道如何正确设置工具栏。

然而，在github的纸质工具栏上也有这个问题:问题#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)

我仍然不知道为什么它不工作，但我开始与聚合物初学者工具包，并得到了一个工作的工具栏。我只能认为我设置了一个糟糕的框架。

两件事

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

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

相关内容

最新更新

热门标签：