Polymer教程：App Elements

App元素在构建整个应用程序时很有用。下表列出了不同类型的Polymer元素。这些组件支持路由，数据存储等功能。

App Layout

App布局元素由工具栏，抽屉和标题等组件组成。这些仅用于标记即可用于构建高质量的响应式布局。下表列出了一些元素。

例子

要使用应用程序布局元素，您必须使用命令提示符中的以下命令移至项目目录。

bower install PolymerElements/app-layout --save

上面的命令会将app-layout元素安装在bower_components文件夹中。然后，您必须使用index.htmlfile中的<link>标记导入文件。

<link rel = "import" href = "/bower_components/app-layout/app-layout.html">
<base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/app-layout/v1.0.1/app-layout/">
<script src = "../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel = "import" href = "app-header/app-header.html">
<link rel = "import" href = "app-toolbar/app-toolbar.html">
<link rel = "import" href = "app-box/app-box.html">
<link rel = "import" href = "demo/sample-content.html">
<link rel = "import" href = "../iron-icons/iron-icons.html">

<style is = "custom-style">
   html, body {
      margin: 0;
      font-family: 'Roboto', 'Noto', sans-serif;
      -webkit-font-smoothing: antialiased;
      background: #f1f1f1;
      max-height: 368px;
   }
   app-toolbar {
      background-color: #4285f4;
      color: #fff;
   } 
   paper-icon-button + [main-title] {
      margin-left: 24px;
   }
   paper-progress {
      display: block;
      width: 100%;
      --paper-progress-active-color: rgba(255, 255, 255, 0.5);
      --paper-progress-container-color: transparent;
   }
   app-header {
      @apply(--layout-fixed-top);
      color: #fff;
      --app-header-background-rear-layer: {
         background-color: green;
      };
   }
   sample-content {
      padding-top: 64px;
   }
</style>

<app-header reveals>
   <app-toolbar>    
      <div main-title>First App</div>    
   </app-toolbar>
</app-header>

<sample-content></sample-content><br>
<app-box style = "height: 100px;border-style: groove;">
   <div main-title>Welcome to</div>
</app-box>

输出

刷新Polymer服务器，然后将显示输出：

App Route

app-route元素利用一个对象，该对象通过route属性来描述有关当前路线的状态。它将使用pattern属性确定状态，并确定与路线有关的一些数据，以及一条包含其余路线的尾部，如以下代码所示：

<app-location route = "{{route}}"></app-location>
<app-route
   route = "{{route}}"
   pattern = "/:page"
   data = "{{routeData}}"
   tail = "{{subroute}}">
</app-route>

<app-route
   route = "{{subroute}}"
   pattern = "/:id"
   data = "{{subrouteData}}">
</app-route>

下表列出了上述实例的说明：

Hashes vs Paths

URL路径名的一部分在后端服务器的帮助下由应用程序位置路由使用。可以使用以下属性将应用程序位置配置为使用哈希部分。

<app-location route = "{{route}}" use-hash-as-path></app-location>