如何使聚合物应用网格可点击

Question

如何使聚合物网格项目可以像材料设计规范一样作为" href"(主要动作)?这是材料设计规范的链接:https://material.google.com/components/grid-lists.html#grid-lists-content.

Answer 1

你看过文档了吗?您可以使用div作为许多a链接的容器，如下所示:

<dom-module id="grid-test">
  <template>
    <style include="app-grid-style">
      :host {
        --app-grid-columns: 3;
        --app-grid-item-height: 100px;
      }
      div {
        padding: 0;
        list-style: none;
      }
      .item {
        background-color: white;
        border: 1px solid black;
      }
    </style>
    <div class="app-grid">
      <a href="#" class="item">1</a>
      <a href="#" class="item">2</a>
      <a href="#" class="item">3</a>
      <a href="#" class="item">4</a>
      <a href="#" class="item">5</a>
      <a href="#" class="item">6</a>
      <a href="#" class="item">7</a>
      <a href="#" class="item">8</a>
      <a href="#" class="item">9</a>
      <a href="#" class="item">10</a>
      <a href="#" class="item">11</a>
      <a href="#" class="item">12</a>
      <a href="#" class="item">13</a>
      <a href="#" class="item">14</a>
    </div>
  </template>
  <script>
    Polymer({
      is: "grid-test"
    });
  </script>
</dom-module>