Add/Remove iron-selected class 基于paper-tab选择

Question

我已经开始学习 Polymer 和 lit-element，并且正在研究活动和非活动状态网格，我在其中使用了带铁页的纸标签。

问题：当我在paper-tabs之间切换时，iron-selectedclass是添加到 paper-tab 链接但未添加到 iron-pages 内容。

如何使 iron-selected class 与 iron-pages 内容一起工作？

任何解决方案都很好！

constructor() {
    super();
    this.currentPage = 0;
}
render() {
return html `
<div class="card">
    <paper-tabs scrollable selected=${this.currentPage}>
        <paper-tab>Tab 1</paper-tab>
        <paper-tab>Tab 2</paper-tab>
        <paper-tab>Tab 3</paper-tab>
    </paper-tabs>
    <iron-pages selected=${this.currentPage}>
        <div>some story for tab 1</div>
        <div>some story for tab 2</div>
        <div>some story for tab 3</div>
    </iron-pages>
</div>
`;
}
}

Answer 1

与 Polymer 不同，lit-html 没有双向数据绑定机制，因此您必须注意更新 [=13= 中的 currentPage 属性 ]:

render() {
  return html`
    <div class="card">
      <paper-tabs scrollable
                  selected=${this.currentPage /* This is unidirectional */}
                  @selected-changed=${e => this.currentPage = e.detail.value}>
        <paper-tab>Tab 1</paper-tab>
        <paper-tab>Tab 2</paper-tab>
        <paper-tab>Tab 3</paper-tab>
      </paper-tabs>
      <iron-pages selected=${this.currentPage}>
        <div>some story for tab 1</div>
        <div>some story for tab 2</div>
        <div>some story for tab 3</div>
      </iron-pages>
    </div>
  `;
}

Add/Remove iron-selected class 基于paper-tab选择

Add/Remove iron-selected class based on the paper-tab selection

polymer

iron-pages

lit-element