폴리머 1.x의 : 네온 - 애니메이션 - 페이지가 용지 탭과 종이 대화

Question

텍스트 내부에서 작동하지 않는 것은 내가 neon-animated-pages가 paper-dialog 내부 paper-tabs에 의해 제어 구현하려는 대화

Here is the plunk

밖에 .

은 내가 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>를 검사하는 것은 더 높이가없는 것을 알 수 :

는,이 문제를 해결하려면 <paper-dialog>에 CSS 스타일을 적용하기를 폭/높이를 설정하는 <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

: 예를 들어,