应用程序布局元素由工具栏, 抽屉和标题等组件组成。这些仅用于标记即可用于构建高质量的响应式布局。下表列出了一些元素。
表：
| Index | Elements | Description |
|---|---|---|
| 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
文章图片
【Polymerjs app布局】它将在bower-component文件夹中安装app-layout元素。然后, 你可以使用index.html文件中的< link> 标记导入文件。
<
link rel = "import" href = "http://www.srcmini.com/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 = "http://www.srcmini.com/webcomponentsjs/webcomponents-lite.min.js">
<
/script>
<
link rel = "import" href = "http://www.srcmini.com/app-header/app-header.html">
<
link rel = "import" href = "http://www.srcmini.com/app-toolbar/app-toolbar.html">
<
link rel = "import" href = "http://www.srcmini.com/app-box/app-box.html">
<
link rel = "import" href = "http://www.srcmini.com/demo/sample-content.html">
<
link rel = "import" href = "http://www.srcmini.com/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>
Hello srcmini....<
/div>
<
/app-box>
输出
文章图片
文章图片
