聚合物紙 - 標題 - 面板未在紙抽屜面板中顯示任何內容
[英]Polymer paper-header-panel not showing any content in paper-drawer-panel
問題描述
當我運行我的代碼時，我只能看到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>
1 個解決方案
解決方案1
5 2016-01-07 19:05:07
沒關系。 我解決了這個問題。
問題是由HTML DOCTYPE引起的
刪除后。 現在一切都正常了。
paper-header-panel-為事件內容滾動手動分配處理程序
[英]paper-header-panel - assigning handler to event content-scroll manually
始終隱藏紙盒面板，而不使用response-width =“ 9999px”
[英]Always hide paper-drawer-panel without using responsive-width=“9999px”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.