在前端开发中，进度条是可视化界面中非常重要的一种元素，它可以让用户了解当前操作或任务的执行情况。针对这一需求，Google 推出了 Material Design，提供了一些 UI 组件，方便前端开发者快速集成。其中 @material/linear-progress 便是一款 Material Design 风格的线性进度条 npm 包，本文将为大家介绍如何使用它。
安装
使用 npm 安装 @material/linear-progress：
npm install @material/linear-progress
同时，因为该包是 Material Design 风格的，还需要引入相应的 CSS 样式：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" href="./node_modules/@material/linear-progress/dist/mdc.linear-progress.css" />
使用
HTML 结构
在 HTML 中添加必要的 DOM 结构。我们需要一个 .mdc-linear-progress 容器，用来包含进度条。同时，我们还需要一个.mdc-linear-progress__buffering-dots 属性，用于展示缓冲状态的小点点。
-- -------------------- ---- -------
---- --------------------------- -------------------
---- --------------------------------------------------
---- ------------------------------- ----------------------------------
----- ----------------------------------------------
------
---- ------------------------------- ------------------------------------
----- ----------------------------------------------
------
------注意：如果需要引入多个进度条，需要更改
id以避免重复。
JavaScript 操作
在 JavaScript 中使用 mdc.linearProgress.MDCLinearProgress 方法注册进度条并控制其状态。
import { MDCLinearProgress } from "@material/linear-progress";
const linearProgress = new MDCLinearProgress(document.querySelector(".mdc-linear-progress"));
linearProgress.open(); // 开启进度条
linearProgress.close(); // 关闭进度条MDCLinearProgress 方法的参数为进度条容器节点，调用 new 后，我们可以使用 open 和 close 方法分别打开和关闭进度条。
CSS 样式
完成 JavaScript 后，还需要为进度条添加一些样式：
-- -------------------- ---- -------
------------------- --------
--------------------- --------
------- --------------------------------------------
------- ----------------------------------------------------------------
-------------------- -
------ ------
------- ----
-
------------------------------------ -
----------------- ----------------
-------
----- ----
----------- ---
-- -- ----
-我们为 .mdc-linear-progress 容器添加了宽高，并对缓冲点点的样式进行了自定义。
示例代码
完整代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ----------------
-----
----------------
----------------------------------------------------------------------------------
--
----- ---------------- -------------------------------------------------------------- --
----- ---------------- ---------------------------------------------------------------------------- --
-------
------------------- --------
--------------------- --------
------- --------------------------------------------
------- ----------------------------------------------------------------
-------------------- -
------ ------
------- ----
-
------------------------------------ -
----------------- ----------------
-------
----- ----
----------- ---
-- -- ----
-
--------
-------
------
---- --------------------------- -------------------
---- --------------------------------------------------
---- ------------------------------- ----------------------------------
----- ----------------------------------------------
------
---- ------------------------------- ------------------------------------
----- ----------------------------------------------
------
------
------- ------------------------------------------------------------------------------------
--------
------ - ----------------- - ---- ----------------------------
----- -------------- - --- ------------------------------------------------------------------
---------------------- -- -----
----------------------- -- -----
---------
-------
-------完成后，你将会得到一个 Material Design 风格的线性进度条。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200706