코어 코어 - 스캐 폴드 요소가 코어 페이지 내부에 표시되지 않음

Question

나는 폴리머의 코어 - 스캐 폴드 요소로 놀았으며 나는 그것을 아주 좋아한다. 그러나, 내가 개발하고있는 특정 앱의 경우 코어 - 스캐 폴드가 전체 앱의 최상위 레이아웃 요소가 될 수 없습니다. 나는 항상 표시되는 메인 애플리케이션 툴바와 스캐 폴드 레이아웃에 의해 제어되지 않는 초기 페이지가 필요합니다. 즉, 스캐 폴드 요소는 주 레이아웃 요소이지만 응용 프로그램의 하위 페이지/하위 요소 중 하나에 대해서만 있습니다. 이것을 달성하기 위해 코어 - 페이지 또는 코어 애니메이션 페이지를 통해 스캐 폴드 제어 된 폴리머 요소를 선택할 수있게하려고합니다. (간단하게 코어 페이지부터 시작하여 코어 애니메이션 페이지로 이동하면 어떻게 작동하는지 이해). 스캐 폴드 요소는 코어 페이지 내부에있을 때 아무런 문제없이로드됩니다. 그러나 핵심 페이지 내부에서 사용하고 선택하면 기본 애플리케이션 툴바가 표시되지만 scaffold 요소는 표시되지 않습니다 (Chrome 콘솔에서는 오류 없음). 즉, 기본 앱 툴바 아래에 빈 디스플레이가 표시됩니다. 누구든지 이것에 대해 밝힐 수 있습니까? 아마 일종의 스타일링 문제일까요? 여기

문제점을 보여주기 위해 필수로 벗었 고레벨 app 요소 코드 (수입은 포함하지 않음) : 여기

및

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

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 페이지가 표시됩니다.