Question

我是Polymer的新手，自从我HTML以来已经有一段时间了，所以我一直在使用堆栈溢出和Google的聚合物指南。现在到了这一点：我正在研究产品目录，我已经在编写将用于产品及其布局的纸卡。但是，我找不到允许我在卡片中浏览的容器（见图）

通过Polymer目录，我只找到了不适合我的可滑动选项，因为我想滚动。有什么想法吗？

Answer 1

你可以使用CSS。使用paper-card和overflow-x为容器和white-space设置样式，如下所示：

.container {
  overflow-x: auto;
  white-space: nowrap;
}
paper-card {
  width: 350px;
  white-space: normal;
}

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-card/paper-card.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        .container {
          width: 50%;
          overflow-x: auto;
          white-space: nowrap;
        }
        paper-card {
          margin: 10px;
          width: 350px;
          white-space: normal;
        }
      </style>
      <div class="container">
        <template is="dom-repeat" items="[1,2,3,4,5,6,7,8,9,10,11]">
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </template>
      </div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({is: 'x-foo'});
      });
    </script>
  </dom-module>
</body>

^codepen

聚合物 - 纸卡之间的侧滚动

1 个答案: