从Polymer3到发光元素和材料组件：替代纸和铁皮纸

Posted 2021-04-12

我正在逐步将Polymer 3应用程序移植到发光元件上，并且还希望通过材料卷筒纸组件替换纸和铁元素。我经常使用paper-tabs和iron-pages的组合来显示属性页/对话框。

在材料Web组件世界中，什么将替代paper-tabs / iron-pages？

我已经找到mwc-tab-bar，但是没有根据所选选项卡实际显示内容的示例。

有没有人提供有关如何构建有时称为页面控件（标签和内容）的示例？

答案

有几个选项：（我希望1和3）

1. 您可以创建条件以呈现并最终延迟加载特定页面。
2. 使用lion-steps之类的东西（它们也提供标签）
3. [使用像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;
  }
}