Polymer 应用布局

17 Mar 2025 | 阅读 2 分钟

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

表

索引	要素	描述
1)	app-box	此元素用作容器，并具有滚动效果，基于滚动位置的视觉效果。
2)	app-drawer	这是一个导航抽屉，将从左侧或右侧滑入和滑出。
3)	app-drawer-layout	这将定位 app-drawer 和其他内容。
4)	app-grid	这用于使用自定义属性创建响应式和流体网格布局。
5)	app-header	此元素在屏幕顶部作为 app-toolbars 的容器工作，并具有滚动效果，基于滚动位置的视觉效果。
6)	app-header-layout	此元素充当一个封面，用于定位 app-header 和其他内容。
7)	app-scrollpos-control	当多个页面共享同一个文档滚动条时，此元素用于保存和恢复滚动位置。
8)	app-toolbar	它是一个水平工具栏，其中包含可用于标记、导航、搜索和其他操作的项目。

示例

在命令提示符下使用以下命令，以便使用 app layout 元素进入项目目录。

它将在 bower-component 文件夹中安装 app-layout 元素。然后，您可以使用 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>Hello JavaTpoint....</div>
</app-box>

输出