简介
@npm-polymer/paper-linear-progress 是一个 Polymer 组件，它提供了一种漂亮的进度条控件，并且非常容易使用。在本文章中，我们将会探讨此组件的使用方法和常见应用场景，供前端开发者参考。
安装
1. 安装 Polymer CLI
在安装 @npm-polymer/paper-linear-progress 之前，您需要先安装 Polymer CLI。您可以通过以下命令安装：
npm install -g polymer-cli
2. 安装 paper-linear-progress
通过以下命令安装 paper-linear-progress:
npm install --save @npm-polymer/paper-linear-progress
使用
使用 @npm-polymer/paper-linear-progress 很容易。下面我们将通过一个例子来进行详细介绍。
1. 创建一个新的 Polymer Web 应用
打开终端并输入以下命令：
polymer init
根据提示，输入您的项目名称和初始默认设置，然后选择 Polymer-2-application 选项。
2. 添加 paper-linear-progress 到您的应用
打开您的项目文件夹，并安装 Polymer 的 iron-pages 和 paper-linear-progress 组件:
npm install --save @polymer/iron-pages npm install --save @npm-polymer/paper-linear-progress
3. 在 HTML 页面中添加 paper-linear-progress
-- -------------------- ---- -------
--------- -----
------
------
--------- ------- -----------
-------
----- ------------------
--------- --------------
----------- --------------------
---------
------------- ------------------------------
-------- -------- ---
---------------
---------------------- ----------------
------
--------------------------------------
----------
-------------
-----------
------- --------------------------------------------------------------------------
--------
--- --- - ------------------------------------------------
-------- - --
------------------------ - ---------- -
--- ----------- - -------------------
------------------ - ------
------------------------- - -----
--------------------- -
------------------------- - ------
----------------- - --
--- -------- - ---------------------- -
-- ------------------ --- -- -
------------------------
------------------ - -----
- ---- -
----------------- -- -----
-
-- ----
-- -----
--
---------
-------
-------在这个例子中，我们创建了一个用来显示进度条的 Polymer 应用。在 HTML 中，我们用到了 Iron Pages 组件，它允许我们在我们的页面中进行切换。当我们点击“Simulate progress bar”按钮时，我们将会触发 _simulateProgressBar 函数。函数首先通过 this.$ 将 paper-linear-progress 元素赋值给 progressBar 变量。我们通过设置 progressBar.hidden 和 progressBar.indeterminate 的值来显示和隐藏进度条，然后集成一个定时器，在定时器中不断的更新进度条的值，直到完成。
总结
在本文中，我们简要介绍了如何安装和使用 @npm-polymer/paper-linear-progress 组件，并向您展示了如何在您的应用中使用它。希望这篇文章能够对前端开发者有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb7d