纸页面板或纸张抽屉面板不会占据浏览器窗口的整个顶部边缘 [英] The paper-header-panel or the paper-drawer-panel won't take the whole top edges of the browser window

查看:147
本文介绍了纸页面板或纸张抽屉面板不会占据浏览器窗口的整个顶部边缘的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好我正在学习Google的聚合物我遵循他们的



我是否缺少这里有什么?我的代码有什么问题?您的帮助和解释将不胜感激。谢谢! : >


Hello I am studying Google's Polymer I followed their guide about Responsive Material Design Layouts But I just noticed that the paper-drawer-panel won't take the whole edge of the top part of the browser window. It has a bit of a gap.

Here's my code

<!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>

The code will render this image as you can see there's a bit of a gap in the edges.

Am I missing something here? What's wrong with my code? Your help and explanation will greatly appreciated. Thanks! :)

解决方案

You are missing the import of paper-styles.html

这篇关于纸页面板或纸张抽屉面板不会占据浏览器窗口的整个顶部边缘的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆