聚合物1.x:纸张对话框中的纸张对话框不起作用

时间:2016-12-31 04:26:41

标签: polymer polymer-1.0 paper-elements paper-dialog polymer-1.x

Here is the plunk

我的目标是在paper-tabs内实施iron-pages + paper-dialog模式。

当我单击第二个选项卡时,我希望看到选项卡式窗格的内容标题为“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>

1 个答案:

答案 0 :(得分:2)

预设所选标签

否则,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'
});
相关问题