Question

我想创建一个结构，其中我有一个列表，我可以使用英雄过渡动画列表中的每个项目。但是，如果我这样做，那么所有项目都会相互叠加......我该怎么办？

  <template repeat="{{item in items}}">
                    <div layout vertical  content
                         flex>
                        <core-animated-pages  content
                                              layout vertical flex > 
                            <section>
                                <paper-shadow class="chain">
                                    {{item}}
                                </paper-shadow>
                            </section>
                            <section>
                                {{item.artists}}
                            </section>
                        </core-animated-pages>
                    </div>
                </template>

Answer 1

要保持项目不重叠，您需要确保元素具有高度。您可以通过在主体本身和自定义元素实例上使用布局属性来执行此操作。

<body fullbleed layout vertical>

  <polymer-element name="x-foo">
    <template>
      <template repeat="{{item in items}}">
        <div layout vertical flex>
          <core-animated-pages layout vertical flex> 
            <section>
              {{item.artist}}
            </section>
          </core-animated-pages>
        </div>
      </template>
    </template>
    <script>
      Polymer({
        items: [
          {
            artist: 'Some dude'
          },
          {
            artist: 'Some other dude'
          }
        ]
      });
    </script>
  </polymer-element>

  <x-foo layout vertical flex></x-foo>

</body>

Example jsbin

列表中的聚合物核心动画页面

1 个答案: