От Polymer3 до компонентов с подсветкой и материалов: замена бумажных вкладок и железных страниц

Question

Я портирую приложение Polymer 3 на подсвеченный элемент поэтапно, а также хочу заменить бумажные и железные элементы материальными веб-компонентами. Я очень часто использую комбинацию paper-tabs и iron-pages для отображения страниц свойств / диалогов.

Что бы заменить paper-tabs / iron-pages в мире веб-компонентов материала?

Я нашел mwc-tab-bar, но нет примера для фактического отображения содержимого в соответствии с выбранной вкладкой.

У кого-нибудь есть пример того, как создать то, что иногда называют управлением страницей (вкладки плюс содержание)?

Answer 1

Есть несколько вариантов: (я бы предпочел 1 и 3)

1. Вы можете просто создать условие для рендеринга и в конце концов лениво загрузить определенную страницу.
2. Использовать что-то вроде шаги льва (они также предоставляют вкладки)
3. Используйте маршрутизатор, такой как simple-w c -router

class MyElement extends LitElement {
  static get properties() {
    return {
      page: String,
    }
  }

  get _oneTemplate() {
    return html`Page one`;
  }

  get _twoTemplate() {
    return html`Page two`;
  }

  constructor() {
    super();
    this.page = 'one';
    setTimeout(() => (this.page = 'two'), 5000);
  }
  render() {
    return this.page === 'one' ? this._oneTemplate : this._twoTemplate;
  }
}