前言
现今的前端技术发展迅速，各类技术也层出不穷。其中，组件库是前端开发中的重要存在，可以让我们快速的构建出各种网站和应用。而 @polymer/app-layout 就是一个常用的开源组件库，它提供了多个常用的布局和导航组件，方便我们快速搭建出漂亮且结构清晰的网站。
安装
@polymer/app-layout 是一个 npm 包，可以通过 npm 安装：
npm i @polymer/app-layout
在安装后，可以使用以下方式进行引用：
import '@polymer/app-layout/app-layout.js'; import '@polymer/app-layout/app-header/app-header.js'; import '@polymer/app-layout/app-drawer/app-drawer.js';
在引入 @polymer/app-layout 后，我们就可以使用其中提供的多个组件了。
组件介绍
app-layout
app-layout 是整个组件库的核心组件，它提供了多个布局和导航组件。其中，使用最广泛的有：app-header、app-toolbar、app-drawer、app-scroll-effects。
app-header
app-header 组件通常放置在网站或应用的顶部，它包含了一些常用的 UI 元素，如 logo、导航链接和搜索框等等。下面是一个简单的例子：
<app-header>
<app-toolbar>
<div slot="title">My App</div>
<paper-icon-button icon="menu" slot="nav"></paper-icon-button>
</app-toolbar>
</app-header>上述代码中，我们创建了一个包含标题和菜单按钮的 app-header。其中，app-toolbar 组件是 app-header 组件的子组件，用于在 app-header 中添加 UI 元素。
app-drawer
app-drawer 组件是一个默认隐藏在左侧的侧边栏，当用户点击打开菜单按钮时，app-drawer 组件会滑动出来。下面是一个简单的例子：
-- -------------------- ---- -------
-------------------
----------- --------------
-------------
------------------ ----------- ----------------------------------
----------------
--------------
-------------
----------- --------------
----------- ----------------
-------------
--------- ----------------
--------------------上述代码中，我们创建了一个带有侧边栏的页面。当用户点击菜单按钮时，app-drawer 组件就会显示出来，显示左侧的菜单栏。
app-scroll-effects
app-scroll-effects 组件提供了多个滚动效果，可以使网站具有炫酷的视觉效果。下面是一个简单的例子：
<app-header effects="waterfall">
<app-toolbar>
<div slot="title">My App</div>
<paper-icon-button icon="menu" slot="nav"></paper-icon-button>
</app-toolbar>
</app-header>上述代码使用了 app-scroll-effects 的 waterfall 效果，当用户滚动页面时，app-header 组件的背景色会逐渐变化，从透明变为不透明。
总结
@polymer/app-layout 组件库提供了多个常用的布局和导航组件，可以帮助我们快速构建出漂亮且结构清晰的网站。通过本文的介绍，我们可以清晰的了解这些组件的使用方式以及其提供的功能。
示例代码
-- -------------------- ---- -------
------
------
----------------- ------------
------- ------------- ---------------------------------------------------------------------------------------------------
------- --------------
------ --------------------------------------------------
------ ------------------------------------
------ -----------------------------------------------
------ -------------------------------------------------
------ -----------------------------------------------
---------
-------
------
-------------------
----------- ------------- ------
-------------
------------------ ----------- ----------------------------------
----------------
--------------
-------------
----------- --------------
----------- ----------------
-------------
--------- ----------------
--------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f75569ca9b7065299ccbca6