Question

我正在尝试创建一个包含core-header-panel的“my-app”元素。似乎人们想要为SPA做一件非常普遍的事情。

我的index.html：

<!DOCTYPE html>
<html>
<head>        
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="elements/my-app.html">
</head>
<body fullbleed layout vertical unresolved>
    <my-app></my-app>   
</body>
</html>

使用my-app.html：

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/core-header-panel/core-header-panel.html">

<polymer-element name="my-app">
    <template>

        <core-header-panel flex>
            <core-toolbar>
                <div>Hello World!</div>
            </core-toolbar>
        </core-header-panel>  

    </template>
    <script src="my-app.js"></script>
</polymer-element>

但我似乎得到的只是：

enter image description here

任何想法？

编辑：我已经将我的代码更改为与Polymer docs（https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel）上的第一个示例完全相同，除了core-header-panel在另一个元素内而不是直接在body中

EDIT2：如果您在核心标题面板上禁用了postion：relative，那么它看起来会更好：

Answer 1

您需要明确设置core-header-panel的高度。您可以使用布局属性：

<body fullbleed layout vertical> <core-header-panel flex>

或CSS：

html, body { height: 100%; margin: 0; } core-header-panel { height: 100%; }

这是在core-header-panel的API文档中描述的：

https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel

编辑：我还没有弄清楚正确的咒语，以使flex布局属性在您的自定义元素中起作用。但是，您应该能够在my-app.html：

中明确设置高度

<template> <style> :host, core-header-panel { height: 100%; } </style>

或者，您可以使用：

core-header-panel { height: 100vh; }

前一种解决方案要求您在作为my-app父项的body元素上设置显式高度。后一解决方案没有，它只使用窗口高度。

Answer 2

Core-Header-Panel依赖于两个div，Content（你有）和core-header。您已使用Core-Toolbar替换了核心标题，因此该小组无法弄清楚如何调整自身大小。你想要做的是将Core-Toolbar放在标题中：

<div class="core-header">
  <core-toolbar>
      <paper-tabs id="tabs" selected="all" self-end>
            <paper-tab name="all">All</paper-tab>
            <paper-tab name="favorites">Favorites</paper-tab>
            </paper-tabs>
  </core-toolbar>
</div>

聚合物core-header-panel在另一个元素内

2 个答案: