简介
@materialr/linear-progress 是一个基于 Material Design 线性进度条组件。它可以在前端进行快速的 UI 开发，同时提供了多种显示样式和自定义功能。该包需要在 npm 上安装并引入，可以通过 npm 引入对应的样式和 js 文件。
安装
npm install @materialr/linear-progress
引入
import '@materialr/linear-progress/dist/mdc.linearProgress.css';
import { MDCLinearProgress } from '@materialr/linear-progress';基础使用
-- -------------------- ---- -------
---- ----------------------------
---- --------------------------------------------------
---- ------------------------------- ----------------------------------
---- ---------------------------------------------
------
---- ------------------------------- ------------------------------------
---- ---------------------------------------------
------
------API
@materialr/linear-progress 提供了丰富的 API，下面我们来了解一下他们的使用方法。
MDCLinearProgress.setBuffer(value: number)设置辅助进度条进度的值MDCLinearProgress.setProgress(value: number)设置主进度条进度的值MDCLinearProgress.getDeterminate()获取线性进度条是否为确定的
实例演示
-- -------------------- ---- -------
------- ---------------- ----------------------------------
------- ------------------ ------------------------------------
------- ----------- -----------------------------
---- -------------------------- ---------------------------------- ----- -------------------
---- --------------------------------------------------
---- ------------------------------- ----------------------------------
---- ---------------------------------------------
------
---- ------------------------------- ------------------------------------
---- ---------------------------------------------
------
------
---- -------------------------- -------------------------------- ----- -------------------
---- --------------------------------------------------
---- ------------------------------- ----------------------------------
---- ---------------------------------------------
------
---- ------------------------------- ------------------------------------
---- ---------------------------------------------
------
------
---- -------------------------- --------------------------- ----- -------------------
---- --------------------------------------------------
---- ------------------------------- ----------------------------------
---- ---------------------------------------------
------
---- ------------------------------- ------------------------------------
---- ---------------------------------------------
------
------
--------
----- ------------- - --- ---------------------------------------------------------------------------------
----- ----------- - --- -------------------------------------------------------------------------------
----- ------ - --- --------------------------------------------------------------------------
-------- ----------------- -
-------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-----------------------------------------------------------------------------
-
-------- ------------------- -
---------------------------------------------------------------------------------------
----------------------------------------------------------------------------------
-----------------------------------------------------------------------------
-
-------- ------------ -
--------------------------------------------------------------------------------
----------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-
------------------------------------------------------------------ -------------------
---------------------------------------------------------------- -----------------
----------------------------------------------------------- ------------
---------结论
@materialr/linear-progress 提供了高度可定制的线性进度条，是一个非常方便快捷的前端 UI 开发工具。通过学习本文的示例代码，你可以了解到如何快速引入和使用它。在实际开发中，你可以根据自己的需求灵活配置和调用 API，为用户提供更加流畅和美观的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446d4