从 Polymer3 到 lit-element 和 material 组件：纸标签和铁页的替代品

Question

我正在逐步将 Polymer 3 应用程序移植到 lit-element，并且还想用 material Web 组件替换纸和铁元素。我经常使用 paper-tabs 和 iron-pages 的组合来显示属性 pages/dialogs.

material 网络组件世界中 paper-tabs/iron-pages 的替代品是什么？

我找到了mwc-tab-bar但是没有实际根据所选标签显示内容的例子

有没有人举例说明如何构建有时称为页面控件（选项卡加内容）的内容？

Answer 1

有几个选项：（我更喜欢 1 和 3）

您可以只创建一个条件来呈现并最终延迟加载某个页面。
使用类似 lion-steps 的东西（他们也提供制表符）
使用类似 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;
  }
}

从 Polymer3 到 lit-element 和 material 组件：纸标签和铁页的替代品

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

polymer

lit-element