Polymer 应用程序布局元素和类似纸张元素之间的澄清

Question

我一直在使用 Polymer 团队提供的许多元素进行工作。我看过显示使用 app-layout 元素的文档和其他显示使用 paper 元素实现相同效果的文档。

例如 paper-drawer-panel 与 app-drawer 非常相似。 paper 元素似乎有更多的配置选项，并允许多个 paper-drawer-panel 元素相互嵌入，而不是不太灵活的 app-drawer.

<paper-drawer-panel>
    <div drawer> Drawer panel... </div>
    <div main> Main panel... </div>
</paper-drawer-panel>

对比

<main>Main panel....</main>
<app-drawer>Drawer panel... </app-drawer>

是否有理由更喜欢 app-layout 元素而不是类似但更灵活的纸质元素？

Answer 1

我认为 <app-*> 元素是后来为响应对应用程序标准模板的请求而开发的。我怀疑其中一些只是为了更容易理解而更改名称。

特别是我一直在使用

<app-header-layout>
  <app-header
    fixed
    effects="waterfall">
    <app-toolbar>
    ...
    </app-toolbar>
 </app-header>
 ... my main content
</app-header-layout>

效果很好。您实际上可以添加多个工具栏，并且一些效果允许随着 headers 向上滚动（包括逐渐消失的背景图像）从一个工具栏淡出到另一个工具栏。

我的 <app-toolbar> 包含各种各样的东西，包括下拉菜单。

我还发现这样更容易理解如何使延迟加载工作。事实上，我的内容只包含一个 "session manager" 元素和一个 "pages" 元素，后者仅在 session 管理器成功验证用户（通过 cookie 或登录）后才延迟加载。该页面元素具有嵌入式 <iron-pages> 和 <app-location> 以及 <app-route> 来完成应用程序 post 登录的所有管理。

Polymer 应用程序布局元素和类似纸张元素之间的澄清

Clarification between Polymer app layout elements and similar paper elements

web-component

polymer

paper-elements

polymer-1.0