設置核心頁面元素的高度？

我在我的自定義元素中獲取核心頁面元素的高度非零，遇到了很多麻煩。核心頁面高度與其選定內容相同的最佳做法是什麼？下面是這顯然打破了一個簡單的例子：設置核心頁面元素的高度？

<!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（注意核心的網頁內容與下一個元素是如何重疊）

這個例子顯示了內芯 - 網頁元素一個自定義元素。注入核心頁面的內容也是自定義元素。

這裏最好的做法是什麼？

來源

2015-01-09 aloo

您可以將樣式應用於x-foo元素中當前選定的頁面，該元素設置display：block和position：relative，這樣x-bar將繼承其內容的高度。

我也爲x-foo元素添加了「block」屬性，所以它也繼承了所選頁面的高度。其他一般屬性的位置 - >https://www.polymer-project.org/docs/polymer/layout-attrs.html#general-purpose-attributes

<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>

來源

2015-01-09 09:05:08

成功 - 即做到了。 – aloo

也在你的第一句話中，你的意思是「... * x-foo *會繼承....」 – aloo

設置核心頁面元素的高度？

回答

相關問題