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

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

0 голосов
/ 19 июня 2020

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

Вопрос: Когда я переключаюсь между 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>
`;
}
}

1 Ответ

1 голос
/ 21 июня 2020

В отличие от 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>
  `;
}
...