Polymer 1.x:当不是纸质对话框的直接子对象时,如何使纸张对话框可滚动以呈现和表现

时间:2016-10-06 19:18:56

标签: polymer polymer-1.0 paper-elements

This jsBin demos correct implementation of paper-dialog-scrollable

However, this jsBin demonstrates paper-dialog-scrollable如果paper-dialog不是paper-dialog-scrollable的直接子项,则无法正常呈现(即div位于中间paper-dialog-scrollable标记内,这打破了它。)

如果paper-dialog不是<!doctype html> <head> <meta charset="utf-8"> <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> <link href="paper-dialog/paper-dialog.html" rel="import"> <link href="paper-dialog-scrollable/paper-dialog-scrollable.html" rel="import"> </head> <body> <dom-module id="x-element"> <template> <button on-tap="open">Open</button> <paper-dialog id="dialog"> <div> <paper-dialog-scrollable> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et felis sem. Fusce at sollicitudin turpis, quis malesuada risus. Praesent nibh purus, gravida at bibendum non, ultrices et ipsum. Sed eu nibh nisl. Praesent mollis faucibus lorem eu ultricies. Nunc viverra est leo, vitae bibendum massa bibendum ac. Pellentesque rhoncus dui eget metus pulvinar, ac pharetra metus luctus. Nam sodales velit a enim pharetra tincidunt. Cras justo mauris, malesuada eu hendrerit vel, scelerisque et purus. Curabitur elementum, eros quis bibendum fringilla, ante lacus consequat nunc, quis tincidunt ante felis a nunc. Pellentesque in dolor dapibus, gravida purus vitae, vulputate tellus. Phasellus non arcu vel arcu bibendum ultrices nec quis quam. Ut tellus tellus, pellentesque a auctor at, maximus at lectus. In hac habitasse platea dictumst.</p><p>Duis vel finibus est. Donec commodo, nibh id auctor ullamcorper, augue nunc scelerisque magna, sed volutpat velit elit malesuada augue. Sed tempus, mi eget tincidunt sodales, arcu quam maximus nunc, ut fringilla ex nibh at justo. Morbi libero felis, iaculis ac dui at, convallis sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam convallis elit orci, sed interdum dolor egestas in. Suspendisse luctus nibh ligula, non commodo erat volutpat ut. Nam mattis risus nec dolor pretium ornare. Phasellus ornare rhoncus elit a facilisis. Nullam non facilisis libero. Maecenas cursus tristique commodo.</p><p>Praesent consequat, diam non faucibus dictum, nisi ex faucibus risus, sit amet maximus dolor metus eu metus. Nullam malesuada sem id libero semper, id eleifend est tincidunt. Proin euismod urna augue, ut rutrum erat tristique non. Donec nec pellentesque sem. Fusce sit amet magna quis enim dapibus mattis. Ut tempus purus non sem tincidunt bibendum. Quisque cursus pretium ipsum, id hendrerit nisl mattis id. Vestibulum ultrices malesuada nisl, a cursus lorem sollicitudin id. Proin finibus rhoncus leo, at finibus lacus consectetur eu. Nulla aliquam quis risus non ultricies. Sed suscipit odio sed turpis scelerisque, non ultricies risus posuere. Duis et convallis felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin a volutpat lorem. Nulla eleifend erat viverra nisi venenatis porttitor.</p><p>Proin egestas, ex et hendrerit pellentesque, orci sem posuere est, ornare porta augue mauris vitae elit. Nunc lobortis sapien in lobortis cursus. Morbi lacinia vel ligula a varius. Morbi mauris metus, pretium sit amet nibh in, vestibulum dapibus felis. Aliquam laoreet dolor nisi, vel ornare orci ultricies vitae. Donec facilisis vehicula elementum. Donec sed ligula leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p><p>Suspendisse eget orci in augue vulputate eleifend non eu sem. Etiam ipsum velit, gravida a egestas a, faucibus sed mauris. Morbi sit amet euismod odio, ac scelerisque diam. Donec neque risus, malesuada vel efficitur quis, tristique non lacus. Suspendisse potenti. Curabitur placerat felis sed ipsum sodales, sit amet dignissim arcu molestie. Sed tincidunt iaculis sagittis. Phasellus aliquet, lorem sed laoreet fermentum, massa mi facilisis felis, ac mattis magna turpis eu odio. Integer gravida sem ac tellus suscipit scelerisque. Aliquam et turpis tristique, elementum dolor luctus, auctor eros. </paper-dialog-scrollable> </div> </paper-dialog> </template> <script> (function(){ Polymer({ is: "x-element", properties: {}, open: function() { this.$.dialog.open(); } }); })(); </script> </dom-module> <x-element></x-element> </body> 的直接子项,如何正确呈现enter code here 并显示正确的滚动行为?请提供一个有效的jsBin。

http://jsbin.com/fapivoqako/1/edit?html,output
{{1}}

1 个答案:

答案 0 :(得分:2)

docs for paper-dialog-scrollable州:

  

如果paper-dialog-scrollable不是实施Polymer.PaperDialogBehavior的元素的直接子项,请记住设置dialogElement

让你的例子有效:

// template
<paper-dialog id="dialog">
  <div>
    <paper-dialog-scrollable id="scrollable">
      <p>Lorem ipsum dolor sit amet...</p>
    </paper-dialog-scrollable>    
  </div>
</paper-dialog>

// script
Polymer({
  ...
  ready: function() {
    this.$.scrollable.dialogElement = this.$.dialog;
  }
});

jsbin