paper-header-panel 或 paper-drawer-panel 不会占据浏览器的整个顶部边缘 window

Question

你好，我正在研究 Google 的 Polymer，我按照他们的指南 Responsive Material Design Layouts 但是我只是注意到纸抽屉面板不会占据顶部的整个边缘浏览器 window。有点差距。

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Layout</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
    <!-- 2. Use an HTML Import to bring in some elements. -->
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">

</head>

<body class="fullbleed vertical layout">

    <paper-drawer-panel class="flex">

        <paper-header-panel drawer>
            <paper-toolbar>
                <div>Application</div>
            </paper-toolbar>
            <div> Drawer content... </div>
        </paper-header-panel>

        <paper-header-panel main>

            <paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                <div>Title</div>
            </paper-toolbar>

            <div> Main content... </div>

        </paper-header-panel>

    </paper-drawer-panel>

</body>

</html>

代码将渲染此图像，您可以看到边缘有一点缝隙。

我是不是漏掉了什么？我的代码有什么问题？您的帮助和解释将不胜感激。谢谢！ :)

Answer 1

您缺少 paper-styles.html

的导入

paper-header-panel 或 paper-drawer-panel 不会占据浏览器的整个顶部边缘 window

The paper-header-panel or the paper-drawer-panel won't take the whole top edges of the browser window

html

polymer

material-design

polymer-1.0