当我运行我的代码时，我只能看到 STANDARD TEST paper-header-panel。 paper-drawer-panel 中的所有内容似乎都是隐藏的。
如果我将初始 paper-header-panel(class=blue) 设置为 1000px，其余内容将显示。
有什么我需要设置的，这样初始的 paper-header-panel 会根据内容自动改变它的高度吗？
谢谢
<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 引起的
删除后。现在一切正常。
关于javascript - polymer 纸页眉面板在纸盒面板中不显示任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34660221/