Question

聚合物1.1

我正在使用paper-ripple。然而，纹波在元素旁边消失。在所有示例中，都不会发生这种情况。我真的想把涟漪效应保持在元素内而不是外面。

<dom-module id="portfolio-display">
  <style>
    :host {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 40%;
     }

    section {
      width: 100%;
      transition: box-shadow 0.1s ease-out; 
      background-color: #5a7785;
    }

    section:hover {
      box-shadow: 0px 0px 30px 0 rgba(0,0,0,0.2), 0 10px 10px 0 rgba(0,0,0,0.24);
      cursor: pointer;
    }

    @media all and (min-width: 1200px) {
      section {
        width: 90%;
      }
    }

    iron-icon[icon="build"] {
      color: rgba(255, 87, 34, 1);
    }

    .big { 
      --iron-icon-height: 200px;
      --iron-icon-width: 200px;
    }
  </style>

  <template>
    <section>
      <div onclick="page('/portfolio')"
        class="vertical layout">
        <div>
          <div>
            <h2 class="section-title">Portfolio</h2>
            <p class="section-description">blah blah blah</p>
          </div>
          <div class="layout horizontal center-center">
            <iron-icon class="big" icon="build"></iron-icon>
          </div>
        </div>
      </div>
      <paper-ripple></paper-ripple>
    </section>
  </template>

  <script>
    Polymer({
      is: "portfolio-display"
    });
  </script>
</dom-module>

Answer 1

尝试给section relative个paper-ripple位置，因为absolute的位置默认设置为<section class="relative">。

$('label[for=male]').html('New Label');

纸纹在元素之外

1 个答案: