App元素在构建整个应用程序时很有用。下表列出了不同类型的Polymer元素。这些组件支持路由，数据存储等功能。
App Layout
App布局元素由工具栏，抽屉和标题等组件组成。这些仅用于标记即可用于构建高质量的响应式布局。下表列出了一些元素。
| 序号 | 元素与说明 |
|---|---|
| 1 | app-box 此元素用作容器，并具有滚动效果，基于滚动位置的视觉效果。 |
| 2 | app-drawer 这是一个导航抽屉，它将从左侧或右侧滑入和滑出。 |
| 3 | app-drawer-layout 这将放置应用程序抽屉和其他内容。 |
| 4 | app-grid 这用于使用自定义属性创建响应式和流体网格布局。 |
| 5 | app-header 此元素在屏幕顶部用作应用程序工具栏的容器，并具有滚动效果，基于滚动位置的视觉效果。 |
| 6 | app-header-layout 此元素用作放置应用程序标题和其他内容的封面。 |
| 7 | app-scrollpos-control 当多个页面共享同一文档滚动器时，此元素用于保存和还原滚动位置。 |
| 8 | app-toolbar 它是一个水平工具栏，其中包含可用于标签，导航，搜索和其他操作的项目。 |
例子
要使用应用程序布局元素，您必须使用命令提示符中的以下命令移至项目目录。
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>下表列出了上述实例的说明：
| 序号 | 栏位及说明 |
|---|---|
| 1 | app-location 它是一个元素，可在浏览器位置栏和应用状态之间提供同步，并生成路由值。 |
| 2 | pattern 通过将route.path属性与pattern属性进行比较来进行匹配。 |
| 3 | app-route 它使用对象设置数据属性，该对象的属性与pattern属性中的参数相对应。它对它们产生的数据对象的双向更改做出响应。 |
| 4 | tail 在将模式应用于匹配的路线后，它代表路线状态的其余部分。 |
Hashes vs Paths
URL路径名的一部分在后端服务器的帮助下由应用程序位置路由使用。可以使用以下属性将应用程序位置配置为使用哈希部分。
<app-location route = "{{route}}" use-hash-as-path></app-location>作者：terry，如若转载，请注明出处：https://www.web176.com/polymer/2289.html
