聚合物 1.x：paper-tab 内部 paper-dialog 不工作

Question

Here is the plunk.

我的目标是在 paper-dialog.

中实现 paper-tabs + iron-pages 模式

当我单击第二个选项卡时，我希望看到选项卡式窗格的内容 header 显示为 "Page 2"，后跟 Lorem Ipsum 文本。但是，第二个选项卡式窗格中没有内容。

我错过了什么？

http://plnkr.co/edit/wyk9jb8cD4nufYQMI3L8?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">

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

      <iron-pages selected="{{selected}}">
        <tab-a></tab-a>
        <tab-b></tab-b>
      </iron-pages>

    </paper-dialog>

    </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'content-el',
        open: function() {
          this.$.dialog.open();
        },
      });
        })();
  </script>
</dom-module>

Answer 1

预设所选标签

否则您的 paper-tabs 将在没有预选选项卡的情况下进行初始化。

Polymer({
  is: 'content-el',
  properties: {
    selected: {
      type: Number,
      value: 0
    }
  },
  open: function() {
    this.$.dialog.open();
  }
});

更正 tab-b 声明中的拼写错误

Polymer({
  // was previously `tabb`
  is: 'tab-b'
});