另一個單元內的聚合物芯-頁眉面板

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>

但我似乎得到的是：

在此處輸入圖片說明

有任何想法嗎？

編輯：我將代碼更改為與Polymer docs（ https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel ）上的第一個示例完全相同核心頁眉面板位於另一個元素內，而不是直接位於體內。

EDIT2：如果在核心頁眉面板上禁用位置：相對，則看起來更好：

Answer 1

您需要顯式設置核心頁眉面板的高度。 您可以使用布局屬性：

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

或CSS：

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

API文檔的core-header-panel中對此進行了描述：

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-Header，因此面板無法確定如何調整自身大小。 您要做的是將“核心工具欄”放置在標題內：

<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>

另一個單元內的聚合物芯-頁眉面板

問題描述

2 個解決方案

解決方案1
2 已采納 2014-10-22 17:59:04

解決方案2
0 2014-10-22 14:23:25

另一個單元內的聚合物芯-頁眉面板

問題描述

2 個解決方案

解決方案1 2 已采納 2014-10-22 17:59:04

解決方案2 0 2014-10-22 14:23:25

解決方案1
2 已采納 2014-10-22 17:59:04

解決方案2
0 2014-10-22 14:23:25