Добавить / удалить класс, выбранный железом, на основе выбора вкладки бумаги

Question

Я начал изучать Полимер и световой элемент и работал над активной и неактивной сеткой статуса, где я использовал бумажные вкладки с железными страницами.

Вопрос: Когда я переключаюсь между paper-tabs, то iron-selected класс добавляет к paper-tab ссылки, но не добавляются в iron-pages содержание.

Как сделать iron-selected классная работа с 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 не имеет механизма двусторонней привязки данных, поэтому вам нужно позаботиться об обновлении currentPage собственность в selected-changedсобытие:

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>
  `;
}