From Polymer3 to lit-element and material components: replacement for paper-tabs and iron-pages

Question

I am porting a Polymer 3 app to lit-element stepwise and also want to replace the paper and iron elements by material web components. I very often am using the combination of paper-tabs and iron-pages to show property pages/dialogs.

What would be the replacement for paper-tabs/iron-pages in the material web components world?

I have found mwc-tab-bar but there is no example for actually displaying contents according to the selected tab.

Has anyone an example for how to build what sometimes is called a page-control (tabs plus contents)?

Answer 1

There are several options: (I would prefer 1 & 3)

1. You could just create a condition to render and eventually lazy load a certain page.
2. Use something like lion-steps (they also provide tabs)
3. Use a router like simple-wc-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;
  }
}