聚合物芯-滚动头-面板样式和导入

我对聚合物很陌生，以下是我第一次尝试。我想添加一个core-scroll-header-panel(这很酷!)，它工作得相当好-代码主要是从样本中复制的。但是我无法访问core-scroll-header-panel的shadow dom来设置headerBg和condensedHeaderBg的样式。开发人员工具没有显示core-scroll-header-panel的影子DOM(我可以看到其他元素的影子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>

有趣的是，当我导入core-scroll-header-panel.html(如上所述)时，整个东西都中断了，没有显示任何内容。但是影子DOM和所有东西都在适当的位置。

当我评论它的页面是可见的，没有背景样式的影子DOM不存在。

知道为什么吗?

我添加了一个JSBin

问候,伊什

PS: core-scroll-header-panel中有一个overflow:hidden CSS元素集。我可以在强制它可见的时候让它可见

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

重要提示:如果core-header-panel的父元素没有高度，它将不显示

使用布局属性，你可以很容易地使core-header-panel填充屏幕

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

或者，如果你想在CSS中做，只要给html, body和core-header-panel一个100%的高度:

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

尝试添加

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

相关内容

最新更新

热门标签：