폴리머 코어 - 스크롤 - 헤더 - 패널 스타일 및 가져 오기

저는 Polymer에 매우 익숙하며 다음과 같이 처음 시도합니다. 나는 core-scroll-header-panel (멋지다!)을 추가하기를 원했고 오히려 괜찮 았는데 - 코드는 주로 샘플에서 복사되었다. 그러나 core-scroll-header-panel의 shadow dom에 액세스하여 headerBg 및 condensedHeaderBg의 스타일을 설정할 수는 없습니다. 내가 같이 (코어 스크롤 헤더 panel.html을 가져올 때 개발자 도구가 핵심 스크롤 헤더 패널의 그림자 DOM을 표시하지 않습니다 흥미롭게폴리머 코어 - 스크롤 - 헤더 - 패널 스타일 및 가져 오기

<!doctype html> 
    <html> 
    <head> 
<link rel="import" href="components/core-toolbar/core-toolbar.html"> 
<link rel="import" href="components/core-icon-button/core-icon-button.html"> 
<link rel="import" href="components/core-scroll-header-panel/core-scroll-header-panel.html"> 

<link rel="import" href="components/paper-item/paper-item.html"> 

<script src="components/platform/platform.js"></script> 
<link rel="import" href="components/font-roboto/roboto.html"> 

    <style> 

/* background for toolbar when it is at its full size */ 
core-scroll-header-panel::shadow #headerBg { 
    background-image: url(images/bg9.jpg); 
} 

/* background for toolbar when it is condensed */ 
core-scroll-header-panel::shadow #condensedHeaderBg { 
    background-color: #f4b400; 
} 

core-toolbar { 
    color: #f1f1f1; 
    fill: #f1f1f1; 
    background-color: transparent; 
} 

.title { 
    -webkit-transform-origin: 0; 
    transform-origin: 0; 
    font-size: 40px; 
}  

.content { 
    padding: 10px 30px; 
}  
    </style> 
</head> 
<body unresolved> 
     <core-scroll-header-panel condenses main> 
      <core-toolbar class="tall">    
      <core-icon-button icon="arrow-back"></core-icon-button> 
      <div flex></div> 
      <core-icon-button icon="search"></core-icon-button> 
      <core-icon-button icon="more-vert"></core-icon-button> 
      <div class="bottom indent title">Title</div>    
      </core-toolbar>    
      <div class="content"> 
      <p> 
       Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. 
      <p> 
       Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.     
      </div> 
     </core-scroll-header-panel>   
</body> 
</html>

를 (I 다른 요소의 그림자 DOM을 볼 수 있습니다) 위의) 모든 일이 깨지고 아무것도 보이지 않습니다. 그러나 그림자 DOM과 모든 것이 제자리에 있습니다.

내가 주석을 달면 그림자 DOM이 없기 때문에 배경 스타일이없는 페이지가 표시됩니다.

어떤 단서가 필요한가요?

가 나는 JSBin

관련, 지내나

PS를 추가 : 핵심 스크롤 헤더 패널에 설정 숨겨진 CSS 요소하십시오 오버 플로우가있다. 내가 볼 수있게 만들 때 물건을 보이게 할 수 있습니다.

출처

2014-07-13 Ish

는

core-scroll-header-panel { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

스크롤 헤더 패널 전체 화면을 채울 수 있도록 추가하려고합니다.

출처

2014-07-13 11:22:27

감사합니다. 그것은 효과가 있었다. 내가 그 지역을 채우기 위해 수동으로 스트레칭해야한다는 것을 알지 못한다. 그래서 나도 조금 걱정이된다. 어디서 읽어야합니까? 또는 어떻게 디버깅 할 수 있습니까? – Ish

내가 core-header-panel과 같은 문제가있을 때 그것을 발견하지 못했지만, [polymer-project.org] (http://www.polymer-project.org/docs/elements/layout- elements.html) : "은 position : relative이고 항상 명시 적으로 높이를 설정해야합니다." 그러나 최첨단 기술이나 오픈 소스 프로젝트에 관해서는 가장 좋은 문서는 소스 코드입니다 .-)이 경우 브라우저의 개발자 도구 만이 CSS의 CSS 속성에 이상이 있음을 보여줄 수 있습니다. DOM 요소 (예 : 높이가 0 인 경우) –

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

중요 : 부모는 높이가없는 경우 핵심 헤더 패널이 표시되지 않습니다. 당신이 CSS에서 그것을 할 것을 선호하는 경우 레이아웃 속성을 사용하여

, 당신은 쉽게 단지 HTML, 본문 및 코어 -을주고, 코어 - 헤더 패널 화면

<body fullbleed layout vertical> 
    <core-header-panel flex> 
    <core-toolbar> 
     <div>Hello World!</div> 
    </core-toolbar> 
    </core-header-panel> 
</body>

를 입력하거나 수 헤더 패널 높이 100 % :

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

출처

2014-07-13 17:31:42 ScampMichael

폴리머 코어 - 스크롤 - 헤더 - 패널 스타일 및 가져 오기

답변

관련 문제