Question

我在我的rails应用中使用了聚合物iron-pages和paper-tabs。问题是在点击paper-tabs之一之前，没有显示任何页面。我希望默认选择iron-pages中的第一页，而无需用户互动。

我已将paper-tabs和iron-pages放在<template is='dom-bind'></template>中。已阅读有关数据绑定的文档，但我无法弄清楚如何实现这一点。请有人建议你提出宝贵意见。谢谢。

<template is="dom-bind">
  <div class="middle">
    <paper-tabs class="bottom self-end" selected="{{selected}}">
      <paper-tab>Page 1</paper-tab>
      <paper-tab>Page 2</paper-tab>
    </paper-tabs>
  </div>
  <div class="bottom">
    <iron-pages selected="{{selected}}">
      <div> Page 1(This should be selected by default.)
      </div>
      <div> Page 2
      </div>
    </iron-pages>
  </div>
</template>

Answer 1

由于您正在使用自动绑定模板，只需添加一个短脚本，在加载时设置selected元素的<iron-pages>属性。例如（假设您使用webcomponents-lite.js）：

<template is="dom-bind">
  <div class="middle">
    <paper-tabs class="bottom self-end" selected="{{selected}}">
      <paper-tab>Page 1</paper-tab>
      <paper-tab>Page 2</paper-tab>
    </paper-tabs>
  </div>
  <div class="bottom">
    <iron-pages selected="{{selected}}">
      <div> Page 1 (This will be selected by default.)
      </div>
      <div> Page 2
      </div>
    </iron-pages>
  </div>
</template>

<script>
  document.addEventListener('WebComponentsReady', function () {
    var template = document.querySelector('template[is="dom-bind"]');
    template.selected = 0; // selected is an index by default
  });
</script>

Answer 2

如果您正在使用Polymer，您还可以通过在Web组件的Polymer属性中定义默认视图来设置默认视图：

T9

Answer 3

使用自定义元素的构造函数（）将属性设置为应选择的选项卡的名称

<paper-tabs id="choiceTab" style="width:400px;" attr-for-selected='name' selected="{{choice}}">
                    <paper-tab name="tab1">Tab 1</paper-tab>
                    <paper-tab name="tab2">Tab 2</paper-tab>

                </paper-tabs>

.....

static get properties() {
            return {
                choice: {
                    type: String,
                    reflectToAttribute: true
                }
            };
        }

.....

constructor() {
                super();
                this.choice = 'tab1';
            }

使用纸质标签

3 个答案: