Question

我希望paper-ripple效果也能填充<div class='title bottom'>。关于如何做到这一点的任何想法？

  <body unresolved>
      <paper-header-panel shadow="true" 
        mode="waterfall-tall"
        class="fit">
        <paper-toolbar>
          <paper-ripple fit></paper-ripple>
          <div class='title'></div>
          <paper-tabs noink="true" selected="0">
          <!-- only HOME gets route. Others will but down below -->
            <paper-tab class="route" onclick="page('/')">
              HOME
            </paper-tab>
            <paper-tab onclick="page('/resume')">
              RESUME
            </paper-tab>
            <paper-tab>
              CONTACT
            </paper-tab>
          </paper-tabs>
          <div class='title bottom'>
            <h1 id="name-title">Foo<p> bar<p></h1>
          </div>
        </paper-toolbar>

UPDATE ... plunker示例在非瀑布模式下压缩paper-header-panel：

   <paper-header-panel  
        mode="waterfall-tall"
        class="fit">
        <div>
        <paper-toolbar>
          <paper-tabs>
          <!-- only HOME gets route. Others will but down below -->
            <paper-tab class="route" onclick="page('/')">
              HOME
            </paper-tab>
          </paper-tabs>
        </paper-toolbar>
          <paper-ripple></paper-ripple>
        </div>

        </paper-header-panel>

Answer 1

paper-toolbar有三个垂直堆叠的div。因此，拥有占据整个空间的paper-ripple不是一个选择。您可以做的是用{em>父 paper-toolbar包裹div并让paper-ripple与paper-toolbar处于同一级别。< / p>

请注意，此父级 div需要有paper-header个类，以便paper-header-panel知道它的标题并指定正确的样式它。另外，要约束paper-ripple，此父 div必须是relative位置。

您需要进行的最后一项更改是手动授予paper-toolbar tall课程，因为它不再是paper-header-panel的直接子女。< / p>

<paper-header-panel mode="waterfall-tall" class="fit">
    <div class="paper-header relative">
        <paper-toolbar class="tall">
            <div class="title"></div>
            <paper-tabs noink selected="0">
                <paper-tab class="route" onclick="page('/')">HOME</paper-tab>
                <paper-tab onclick="page('/resume')">RESUME</paper-tab>
                <paper-tab>CONTACT</paper-tab>
            </paper-tabs>
            <div class="title bottom">
                <h1 id="name-title">Foo<p> bar<p></h1>
            </div>
        </paper-toolbar>

        <paper-ripple></paper-ripple>
    </div>
</paper-header-panel>

查看此plunker。

paper-ripple-填充纸质工具栏中的兄弟元素

1 个答案: