前言
在前端开发中，我们常常需要使用一些开源项目来帮助我们快速构建页面，提高开发效率。其中，npm 是一个非常常用的包管理器，它提供了海量的开源项目供我们使用。本篇文章就要介绍一个非常实用的 npm 包——@npm-polymer/paper-toolbar，它可以帮助我们快速搭建一个漂亮的工具栏。
包简介
@npm-polymer/paper-toolbar 是一个使用了 Polymer 技术的开源项目，它提供了一系列漂亮的工具栏，能够让我们方便快捷地构建工具栏并为其添加各种功能按钮。同时，它还能够非常好的与其他 Polymer 组件进行集成使用。
安装
通过 npm 包管理器，我们可以非常方便地将 @npm-polymer/paper-toolbar 添加到我们的项目中。在终端中执行以下命令即可安装：
npm install @npm-polymer/paper-toolbar
使用示例
下面我们将使用一个简单的示例来演示 @npm-polymer/paper-toolbar 的使用方法。首先，我们需要在我们的 HTML 文件中引入 paper-toolbar 元素：
-- -------------------- ---- -------
------
------
------- ------------- --------------------------------------------------------------------------
-------
------
---------------
------------------ --------------------------------
---- ---------------- ---------
------------------ ----------------------------------
----------------
-------
-------以上代码中，我们向页面添加了一个 paper-toolbar 元素，同时还添加了两个 paper-icon-button 元素和一个 div 元素，分别用于显示菜单图标、应用名称和搜索图标。接下来，我们需要在我们的项目中引入相应的样式表：
-- -------------------- ---- -------
------
------
----- ---------------- --------------------------------------------------------------------------
------- ------------- --------------------------------------------------------------------------
-------
------
---------------
------------------ --------------------------------
---- ---------------- ---------
------------------ ----------------------------------
----------------
-------
-------还需要注意的一点是，在 Polymer 3.x 中，我们需要添加 type="module" 属性来正确引入 JS 文件。
指导意义
@npm-polymer/paper-toolbar 是一个非常实用的 npm 包，它能够帮助我们快速构建漂亮的工具栏，并且还能够与其他 Polymer 组件进行集成使用。同时，学习使用 @npm-polymer/paper-toolbar 还能够让我们掌握 Polymer 技术的基本使用方法，这对我们之后的开发工作也是非常有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddbab