Polymer 1.x：霓虹动画页面在纸标签和纸对话框中不起作用

Question

文本落在对话框之外

我想在 paper-dialog.

中实现由 paper-tabs 控制的 neon-animated-pages

我希望看到 tab-a 和 tab-b 的内容包含在 paper-dialog 中，但内容却溢出到 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> 以设置它们的 width/height；并在页面上设置 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

Polymer 1.x：霓虹动画页面在纸标签和纸对话框中不起作用

Polymer 1.x: neon-animated-pages not working inside paper-tabs and paper-dialog

polymer

polymer-1.0

paper-elements

polymer-1.x

neon-animation