Polymer 1.x:neon动画页面无法在纸张选项卡和纸张对话框中工作 文本落在对话框外

Polymer 1.x:neon动画页面无法在纸张选项卡和纸张对话框中工作 文本落在对话框外,polymer,polymer-1.0,paper-elements,polymer-1.x,neon-animation,Polymer,Polymer 1.0,Paper Elements,Polymer 1.x,Neon Animation,我想在纸张对话框中实现由纸张选项卡控制的霓虹灯动画页面 我希望看到tab-a和tab-b的内容包含在纸质对话框内,但内容却溢出到纸质对话框外 我错过了什么 打开对话框 对话标题 表1 表2 (功能(){ "严格使用",; 聚合物({ 是‘内容el’, 行为:[ 聚合物。纳米二氧化钛的性能, 聚合物。纳米二氧化钛的性能, 聚合物。可调铁胶的弹性体, ], 特性:{ 选定:{ 类型:数字, 数值:0 } }, 打开:函数(){ 此.dialog.open(); }, }); })(); 关闭对话框

我想在
纸张对话框
中实现由
纸张选项卡
控制的
霓虹灯动画页面

我希望看到
tab-a
tab-b
的内容包含在
纸质对话框
内,但内容却溢出到
纸质对话框

我错过了什么


打开对话框
对话标题
表1
表2
(功能(){
"严格使用",;
聚合物({
是‘内容el’,
行为:[
聚合物。纳米二氧化钛的性能,
聚合物。纳米二氧化钛的性能,
聚合物。可调铁胶的弹性体,
],
特性:{
选定:{
类型:数字,
数值:0
}
},
打开:函数(){
此.dialog.open();
},
});
})();

关闭对话框内容在
内,检查
会发现它没有高度:

要解决此问题,请将CSS样式应用于
以设置其宽度/高度;并在页面上设置
溢出
,以允许滚动。例如:


纸张对话框{
宽度:75%;
最小宽度:50vw;
}
霓虹动画页面{
边缘:2米;
身高:100%;
最小高度:25vh;
溢出:自动;
}
...

关闭对话框内容在
内,检查
会发现它没有高度:

要解决此问题,请将CSS样式应用于
以设置其宽度/高度;并在页面上设置
溢出
,以允许滚动。例如:


纸张对话框{
宽度:75%;
最小宽度:50vw;
}
霓虹动画页面{
边缘:2米;
身高:100%;
最小高度:25vh;
溢出:自动;
}
...

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