我是Polymer的新手,自从我HTML以来已经有一段时间了,所以我一直在使用堆栈溢出和Google的聚合物指南。 现在到了这一点:我正在研究产品目录,我已经在编写将用于产品及其布局的纸卡。但是,我找不到允许我在卡片中浏览的容器(见图)
通过Polymer目录,我只找到了不适合我的可滑动选项,因为我想滚动。 有什么想法吗?
答案 0 :(得分:0)
你可以使用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>