聚合物的1.x：霓虹灯动画的页面不是纸标签和纸对话

Question

文本内的工作落在外面对话框

Here is the plunk

我想要实现neon-animated-pages由paper-tabs一个paper-dialog内部控制。

我希望看到包含在里面paper-dialog的tab-a和tab-b内容，而是内容溢出到外面paper-dialog。

我错过了什么？

http://plnkr.co/edit/bPUclBOpghNFVmKMbOzc?p=preview

<link href="tab-a.html" rel="import"> 
<link href="tab-b.html" rel="import"> 

<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/"> 
<link rel="import" href="polymer/polymer.html"> 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 

<link rel="import" href="paper-dialog/paper-dialog.html"> 
<link rel="import" href="paper-tabs/paper-tabs.html"> 
<link rel="import" href="iron-pages/iron-pages.html"> 
<link rel="import" href="neon-animation/neon-animation.html"> 
<link rel="import" href="neon-animated-pages/neon-animated-pages.html"> 

<dom-module id="content-el"> 
    <template> 
     <style></style> 

    <button on-tap="open">Open Dialog</button> 

    <paper-dialog id="dialog" modal> 
     <h2>Dialog Title</h2> 

     <paper-tabs selected="{{selected}}"> 
     <paper-tab>Tab 1</paper-tab> 
     <paper-tab>Tab 2</paper-tab> 
     </paper-tabs> 

     <neon-animated-pages selected="{{selected}}"> 
     <tab-a entry-animation="slide-from-left-animation" 
       exit-animation="slide-left-animation" 
     ></tab-a> 
     <tab-b entry-animation="slide-from-right-animation" 
       exit-animation="slide-right-animation" 
     ></tab-b> 
     </neon-animated-pages> 

    </paper-dialog> 

    </template> 

    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'content-el', 

       behaviors: [ 
        Polymer.NeonAnimationRunnerBehavior, 
        Polymer.NeonAnimatableBehavior, 
        Polymer.IronResizableBehavior, 
       ], 

     properties: { 
      selected: { 
      type: Number, 
      value: 0 
      } 
     }, 
     open: function() { 
      this.$.dialog.open(); 
     }, 
     }); 
     })(); 
    </script> 
</dom-module> 

Answer 1

关断对话的内容在里面<neon-animated-pages>，并检查<neon-animated-pages>表明，它没有高度：

为了解决这个问题，应用CSS样式的<paper-dialog>和<neon-animated-pages>设置它们的宽度/高度;并在页面上设置overflow以允许滚动。例如：

<dom-module id="content-el"> 
<template> 
    <style> 
    paper-dialog { 
     width: 75%; 
     min-width: 50vw; 
    } 
    neon-animated-pages { 
     margin: 2em; 
     height: 100%; 
     min-height: 25vh; 
     overflow: auto; 
    } 
    </style> 
    ... 
</template> 
</dom-module> 

plunker