Question

我在使用core-pages元素在我的自定义元素中具有非零高度时遇到了很多麻烦。使核心页面高度与其选定内容相同的最佳做法是什么。这是一个显而易见的小例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
  </head>
  <body>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
        <link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">


    <polymer-element name="x-foo">
      <template>
        <core-pages id="pages" selected="{{selected}}">
          <content></content>
        </core-pages>
      </template>
      <script>
        Polymer('x-foo', {
          ready: function() {
            this.selected = 0;
          }
        });
      </script>
    </polymer-element>

    <polymer-element name="x-bar">
      <template>
          <div><content></content></div>
      </template>
      <script>
        Polymer('x-bar', {});
      </script>
    </polymer-element>


    <p>BEFORE</p>
    <x-foo>
      <x-bar>some text here</x-bar>
      <x-bar>some other text here</x-bar>
    </x-foo>
    <p>AFTER</p>
  </body>
</html>

和jsbin一起查看结果：http://jsbin.com/xowoxakuwu/1/edit（注意核心页面内容如何与下一个元素重叠）

此示例显示自定义元素中的core-pages元素。注入核心页面的内容也是自定义元素。

这里最好的做法是什么？

Answer 1

您可以将样式应用于x-foo元素中当前选定的页面，该页面设置display：block和position：relative，因此x-bar将继承其内容的高度。

我还添加了＆＃34;块＆＃34;属性为x-foo元素，因此它也继承了所选页面的高度。其他一般属性在这里 - ＆gt; https://www.polymer-project.org/docs/polymer/layout-attrs.html#general-purpose-attributes

＆＃13;

<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">

<polymer-element name="x-foo" block>
  <template>

    <style>
      ::content > .core-selected {
        position: relative;
        display: block;
      }
    </style>

    <core-pages id="pages" selected="{{selected}}">
      <content></content>
    </core-pages>
  </template>
  <script>
    Polymer('x-foo', {
      ready: function() {
        this.selected = 0;
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-bar">
  <template>
    <div>
      <content></content>
    </div>
  </template>
  <script>
    Polymer('x-bar', {});
  </script>
</polymer-element>

<p>BEFORE</p>
<x-foo>
  <x-bar>some text here</x-bar>
  <x-bar>some other text here</x-bar>
</x-foo>
<p>AFTER</p>

＆＃13;

设置核心页面元素的高度？

1 个答案: