Question

当我运行我的代码时，我只能看到STANDARD TEST纸张标题面板。纸抽屉面板内的所有东西似乎都被隐藏了。

如果我将初始paper-header-panel（class = blue）设置为1000px，则会显示其余内容。

我需要设置任何内容，以便初始的纸标题面板会根据内容自动更改它的高度吗？

由于

<link rel="import" href="/apps/polymer-chat/js/bower_components/polymer/polymer.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-item/paper-item.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/apps/polymer-chat/css/app-theme.html">

<dom-module id="main-component">
    <link rel="import" type="css" href="/apps/polymer-chat/css/main-component.css">
    
    <template>
        <paper-header-panel class="blue">
            <div class="paper-header">STANDARD TEST</div>
            <paper-drawer-panel 
                id="mainDrawerPanel" 
                class="main-drawer-panel" 
                responsive-width="600px"
                drawer-width="[[_computeListWidth(_isMobile)]]"
                drawer-toggle-attribute="list-toggle"
                narrow="{{_isMobile}}"
            >
                <paper-header-panel class="list-panel" drawer>
                    <paper-menu class="list" on-iron-activate="_listTap">
                        <paper-item>1</paper-item>
                        <paper-item>2</paper-item>
                        <paper-item>3</paper-item>
                        <paper-item>4</paper-item>
                    </paper-menu>
                </paper-header-panel>
                <paper-header-panel class="content-panel" main>
                    <paper-toolbar responsive-width="600px">
                        <paper-icon-button icon="menu" list-toggle></paper-icon-button>
                        <span class="flex">CHAT PERSON NAME HERE</span>
                    </paper-toolbar>
                    <div class="content">MAIN AREA</div>
                </paper-header-panel>
            </paper-drawer-panel>
        </paper-header-panel>
    </template>
    
    <script>
        Polymer({
            is: 'main-component',
            
            _computeListWidth: function(isMobile) {
                // when in mobile screen size, make the list be 100% width to cover the whole screen
                return isMobile ? '100%' : '25%';
            },
            
            _listTap: function() {
                this.$.mainDrawerPanel.closeDrawer();
            }
        });
    </script>
</dom-module>

:host {
    display:block;
}

.paper-header {
    height: 60px;
    font-size: 20px;
    color: var(--text-primary-color);
    line-height: 60px;
    padding: 0 30px;
}

.blue .paper-header {
    background-color: var(--default-primary-color);
}

.list-panel {
    background-color: #fafafa;
    
    --paper-header-panel-standard-container: {
        border-right: 1px solid #ccc;
    };
}

paper-toolbar {
    background-color: #42A5F5;
}

.list {
    background-color: #FFFFFF;
}

.list  paper-item {
    height: 80px;
    border-bottom: 1px solid #dedede;
    background-color: #fafafa;
    color: #000000;
}

.main-drawer-panel:not([narrow]) [list-toggle] {
    display: none;
}

.content {
    height: 3000px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
        
        <title>Polymer Demo</title>
        
        <script src="js/bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="/apps/polymer-demo/components/main-component.html">
        
        <style is="custom-style">
            body {
                font-family: 'Roboto', sans-serif;
            }
        </style>
    </head>

    <body class="fullbleed layout vertical">
        <main-component></main-component>
    </body>
</html>

Answer 1

没关系。我发现了问题。

问题是由HTML DOCTYPE引起的

删除后。现在一切正常。

聚合物纸 - 标题 - 面板未在纸抽屉面板中显示任何内容

1 个答案: