Элемент с полимерным ядром, который не отображается внутри основных страниц

Question

Я играю с элементом ядра ядра, и мне это очень нравится. Однако для конкретного приложения, которое я разрабатываю, ядро-эшафот не может быть элементом верхнего уровня для всего приложения. Мне всегда нужно отображать основную панель инструментов приложения и начальную страницу, которая не контролируется макетом эшафотов. Другими словами, элемент scaffold является основным элементом макета, но только для одной из подстраниц/подэлементов приложения. Чтобы добиться этого, я пытаюсь сделать элемент управления, контролируемый эшафотом, доступным для выбора с помощью основных страниц или основных анимированных страниц (начиная с основных страниц для простоты, а затем мигрировать на ядро-анимированные страницы, когда я понять, как это работает). Элемент эстакады загружается без каких-либо трудностей, если не внутри основных страниц. Однако при использовании внутри основных страниц и его выборе отображается основная панель инструментов приложения, но элемент леса (нет ошибок в консоли 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> 

и здесь леска-элементный код раздели до его предметов первой необходимости, а (также Sans импорта), просто для полноты картины:

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

Answer 1

Я думаю, что проблема в том, что core-pages не имеют высоту в вашей версии.

Я собрал вам пример. Я использую the fullbleed attribute to set the body to 100vh. Затем, используя the fit attribute, чтобы мой элемент охватывал всю страницу. Затем установите 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> 

Here's a jsbin. Нажмите следующую кнопку, чтобы увидеть страницу core-scaffold.