聚合物纸盒面板中没有显示任何内容

Polymer paper-header-panel not showing any content in paper-drawer-panel

本文关键字：显示 任何内 聚合物      更新时间：2023-09-26

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

如果我将初始的页眉面板（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>

永不终止。我解决了这个问题。

该问题是由HTML DOCTYPE引起的

移除后。现在一切正常。

相关文章：