`npm` 包 `@polymer/paper-progress` 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@polymer/paper-progress 是一个基于 Polymer 框架的 Web Component，是一个简单易用的进度条控件。它提供了许多可自定义的属性，可以实现丰富多样的表现形式，如圆形、倒计时等，还可以通过事件监听来实现自定义回调事件。

安装

首先，你需要在你的项目中安装 @polymer/paper-progress：

npm install @polymer/paper-progress --save

使用方法

基本用法

安装成功后，你可以在你的 HTML 文件中引入该组件：

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- --------------- --
    --------------------- ------------

    ---- -- --- --------- ------- ---
    ------- -----------------------------------------------------------------------------------

    ---- -- -------------- -- ---
    ------- ------------- ----------------------------------------------------------------------
  -------
  ------
    --------------- ----------------------------
  -------
-------

我们可以看到，在这个 HTML 文件中添加了一个 paper-progress 的标签，并设置了一个 value 属性，这表示进度条的当前进度为 50%。

为了兼容性考虑，我们还需要在头部引入兼容性补丁。

自定义风格

@polymer/paper-progress 提供了许多可自定义的属性，我们可以通过设置这些属性来修改进度条的样式。

颜色设置

设置进度条的 primary-color 属性可以修改进度条的颜色：

<paper-progress value="50" primary-color="#f00"></paper-progress>

模式切换

@polymer/paper-progress 还支持不同的进度条样式，可以通过设置 mode 属性来实现：

determinate：确定的进度条样式，会显示当前进度；
indeterminate：不确定的进度条样式，没有具体进度数据。

<paper-progress value="50" mode="indeterminate"></paper-progress>

圆形进度条

@polymer/paper-progress 还支持圆形进度条的样式，只需要设置 circle 属性即可：

<paper-progress value="50" circle></paper-progress>

倒计时

@polymer/paper-progress 还支持倒计时样式，只需要设置 countdown 属性即可：

<paper-progress value="50" countdown></paper-progress>

常用事件

@polymer/paper-progress 组件提供了许多有用的事件，可以让我们实现更加优秀的交互体验。

`iron-resize` 事件

进度条大小变化时，paper-progress 会触发 iron-resize 事件，我们可以监听这个事件来实现相应的逻辑。

const myProgressBar = document.querySelector('paper-progress');
myProgressBar.addEventListener('iron-resize', () => {
  console.log('paper-progress 大小已改变');
});

示例代码

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  --------------------- ------------

  ---- -- --- --------- ------- ---
  ------- -----------------------------------------------------------------------------------

  ---- -- -------------- -- ---
  ------- ------------- ----------------------------------------------------------------------
-------
------

  -------------
  --------------- ----------------------------

  --------------
  --------------- ---------- --------------------------------------

  -------------
  ------------
  --------------- ----------------------------
  -------------
  --------------- --------------------------------------

  --------------
  --------------- ---------- ------------------------

  ------------
  --------------- ---------- ---------------------------

  -------------
  --------------- ---------- ------------------------------------
  --------
    ----- ------------- - -----------------------------------------
    --------------------------------------------- -- -- -
      --------------------------- --------
    ---
  ---------

-------
-------

结语

@polymer/paper-progress 是一个非常实用的 Web Component，可以帮助我们实现各种形式的进度条。在实际项目中，我们可以根据自己的需求来灵活应用它。希望本次文章能够对大家学习进度条控件有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbcd3

`npm` 包 `@polymer/paper-progress` 使用教程

简介

安装