1

我一直在玩聚合物的核心支架元素，我非常喜欢它。但是，对于我正在开发的特定应用程序，核心脚手架不能是整个应用程序的顶级布局元素。我需要一个始终显示的主应用程序工具栏和一个不受支架布局控制的初始页面。换句话说，scaffold-element 是主要的布局元素，但仅适用于应用程序的子页面/子元素之一。为了实现这一点，我试图通过核心页面或核心动画页面选择支架控制的聚合物元素（为简单起见，从核心页面开始，然后迁移到核心动画页面一次我了解它是如何工作的）。当不在核心页面内时，脚手架元素加载没有任何困难。然而，当在 core-pages 中使用并选中它时，会显示主应用程序工具栏，但不会显示脚手架元素（Chrome 控制台中没有错误）。换句话说，主应用程序工具栏下的空白显示。任何人都可以对此有所了解吗？也许是某种样式问题？

这是高级应用程序元素代码，精简到演示问题的基本要素（不包括导入）：

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

<template>

    <style>

        core-header-panel {
            /* height: 100% fails here on some browsers */
            height: 100vh;  /* 100% of the viewport height */
        }

        core-toolbar {
            background-color: #5264ae; /* Google Blue ; */
            color: #fff; /* White */
            font-weight: 700; /* Boldish font */
        }

    </style>

    <!-- HIGH LEVEL APP LAYOUT ELEMENT -->
    <core-header-panel id="appHeader" mode="standard">

        <!-- OUTER APP TOOLBAR ELEMENT -->
        <core-toolbar id="appToolbar">
            <paper-icon-button id="navicon" icon="arrow-back"></paper-icon-button>
            <span flex>App Name</span>
            <paper-icon-button id="searchbutton" icon="search"></paper-icon-button>
        </core-toolbar>

        <!-- MAIN CONTENT ELEMENTS -->
        <core-pages id="mainPages" selected="{{selectedPage}}">

            <my-default-page-element name="firstPage" on-core-activate="{{pageSelect}}"></my-default-page-element>

            <my-scaffold-element name="scaffoldPage"></my-scaffold-element>

        </core-pages>

    </core-header-panel>

</template>

<script>
    Polymer('my-app', {

        selectedPage: 'firstPage',
        //selectedPage: 'scaffoldPage',

        pageSelect: function () {
            this.showPage();
        },

        showPage: function () {
            //this.selectedPage = "scaffoldPage";
            this.$.mainPages.selected = "scaffoldPage";
        }

    });
</script>

为了完整起见，这里是脚手架元素代码也被剥离了它的基本要素（也没有导入）：

<polymer-element name="my-scaffold-element">
<template>
    <style shim-shadowdom>
        core-toolbar {
            background-color: #5264ae; /* Google Blue ; */
            color: #fff; /* White */
        }

        core-scaffold::shadow core-toolbar {
            background-color: #5264ae; /* Google Blue ; */
            color: #fff; /* White */
        }

        core-scaffold::shadow core-header-panel {
            background: #FFF; /* White */
            color: black;
        }

        /* For use with the shim-shadowdom directive interpreted only when on a non-webcomponent/shadowdom native platform */
        /* (i.e. I noticed the above styling wasn't being applied by FireFox */
        core-scaffold #main core-header-panel {
            background: #FFF;   /* White */
            color: black;
        }

    </style>


    <core-scaffold id="contentscaffold">
        <core-header-panel id="innerHeader" navigation flex>
            <core-toolbar id="innerToolbar">
                <span>Options</span>
            </core-toolbar>
            <core-menu>
                <core-item label="Subpage1" on-tap=" {{ pageTapAction }}"></core-item>
                <core-item label="Subpage2" on-tap="{{ pageTapAction }}"></core-item>
                <core-item label="Subpage3" on-tap="{{ pageTapAction }}"></core-item>
                <core-item label="Subpage4" on-tap="{{ pageTapAction }}"></core-item>
                <core-item label="Subpage5" on-tap="{{ pageTapAction }}"></core-item>                    
            </core-menu>
        </core-header-panel>

        <span id="sectionTitle" tool>Subpage1</span>

        <core-pages id="pages" selected="0">
            <section id="sectionPage1">
                <my-subpage-one-element></my-subpage-one-element>
            </section>
            <section id="sectionPage2">
                <div>Page 2 polymer element here</div>
            </section>
            <section id="sectionPage3">
                <div>Page 3 polymer element here</div>
            </section>
            <section id="sectionPage4">
                <div>Page 4 polymer element here</div>
            </section>
            <section id="sectionPage5">
                <div>Page 5 polymer element here</div>
            </section>                
        </core-pages>

    </core-scaffold>
</template>


<script>
    Polymer('my-scaffold-element', {

        pageTapAction: function(e, detail, sender) {

            for(var key in sender.parentNode.children) {
                if (sender.parentNode.children[key].label == e.target.label) {
                    this.$.pages.selected = key;
                    this.$.sectionTitle.innerText = e.target.label;
                }
            }
        }
    });
</script>

还有其他人在核心页面中使用脚手架元素时遇到问题吗？再一次，只是为了重新迭代，当在核心页面之外加载时，脚手架元素自己加载得非常好。

更新：

为了完整起见并显示此场景中涉及的所有 CSS 样式，这里是导入高级应用程序元素本身的索引页面。注意使用fullbleed：

<html>
<head>
    <title>Application Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <script src="/components/platform/platform.js"></script>

    <link rel="import" href="/components/my-app-components/my-app.html">

    <style>

        html, body {
            height: 100%;
            margin: 0;
        }

        body {
            font-family: sans-serif;
        }

    </style>
</head>

<body fullbleed unresolved> 

<template is="auto-binding">

    <my-app></my-app>

</template>    

</body>

</html>
4

1 回答 1

2

我认为问题在于core-pages您的版本没有高度。

我为你举了一个例子。我正在使用fullbleed 属性将其设置body为 100vh。然后使用该fit属性使我的元素覆盖整个页面。然后设置有core-pages一个height。100%

<body fullbleed>

  <polymer-element name="x-foo" fit>
    <template>
      <style>
        core-pages {
          height: 100%;
        }
      </style>
      <button on-tap="{{prevPage}}">Prev page</button>
      <button on-tap="{{nextPage}}">Next page</button>
      <core-pages id="pages" selected="0">
        <div>Page 1. Not so exciting</div>
        <core-scaffold>
          <core-header-panel navigation flex mode="seamed">
            <core-toolbar>Application</core-toolbar>
            <core-menu theme="core-light-theme">
              <core-item icon="settings" label="item1"></core-item>
              <core-item icon="settings" label="item2"></core-item>
            </core-menu>
          </core-header-panel>
          <div tool>Title</div>
          <div>Content goes here...</div>
        </core-scaffold>
      </core-pages>
    </template>
    <script>
      Polymer({
        prevPage: function() {
          this.$.pages.selected = 0;
        },
        nextPage: function() {
          this.$.pages.selected = 1;
        }
      });
    </script>
  </polymer-element>

  <x-foo></x-foo>

</body>

这是一个 jsbin。单击下一步按钮以查看该core-scaffold页面。

于 2014-09-03T16:30:46.493 回答