前言
React 是一种广泛使用的 JavaScript 库，用于构建动态用户界面。而@react.material/linear-progress 是在 React 框架内使用的一个 npm 包，该 npm 包为线性进度条提供了 Material Design 风格的 UI 组件。
在这篇文章中，我们将详细介绍该 npm 包的使用方法，同时提供丰富的示例代码，帮助您快速上手使用。
安装
要使用@react.material/linear-progress 包，首先需要确保您已经安装了 React 和它所依赖的 Node.js 环境。安装 Node.js 并非本篇文章的重点，此处不再赘述。
一旦您的环境配置完毕，您可以在终端中执行以下命令：
npm install @react.material/linear-progress
该命令将下载@react.material/linear-progress 包及其所有依赖项，并将其安装到您的 React 项目中。
使用
要在 React 应用程序中使用@react.material/linear-progress 包，需要导入 LinearProgress 组件，然后将其包含在 JSX 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------------------------
-------- ----- -
------ -
-----
--------------- ------------- ----------- --
------
--
-
------ ------- ----LinearProgress 组件有两个必需属性：progress 和 buffer。您可以根据需要设置它们的值。
本示例中，progress 值为 50，buffer 值为 80。
API
下表列出了 LinearProgress 组件的全部属性及其意义。
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| progress | number | 0 | 进度条的进度。 |
| buffer | number(s) | null | 进度条的缓冲进度。 |
| color | string | primary |
进度条的颜色。可选值：primary、secondary、error。 |
| variant | string | indeterminate |
进度条的变体。可选值：determinate、indeterminate、buffer、query。 |
| value | number | 0 | 针对 determinate 变体时提供的值。 |
progress
progress 属性是 LinearProgress 组件的必需属性。它是控件当前的进度百分比，取值范围从 0 到 100，0 表示未启动，而 100 表示已完成。默认值是 0。
buffer
buffer 属性是 LinearProgress 组件的缓冲进度属性。如果将其设置为一个数字，控件将在进度条中显示一个分隔符，并将分隔符的位置与 buffer 属性值进行比较。如果当前进度高于 buffer 属性的值，则分隔符将移到当前进度的位置；否则分隔符将在 buffer 属性的位置。
该属性可为一个数字或以逗号分隔的两个数字。对于单个数字，表示在进度条上的一个位置，而对于两个数字，第一个数字是缓冲进度开始的位置，第二个数字是缓冲进度结束的位置（取值应在 0 到 100 范围内）。
默认值是 null。
color
color 属性指定了 LinearProgress 的颜色。它接受以下可选值：
primary：该颜色是 Material Design 中提供的主要颜色，通常用作应用程序中最明显的元素。secondary：该颜色通常用于应用程序中的次要元素。error：该颜色表示与错误相关的情况。
默认值是 primary。
variant
variant 属性指定了 LinearProgress 的变体。它接受以下可选值：
determinate：该值启用一个可重复使用的参数来指定进度。indeterminate：该值表示一个循环动画，表示进度正在进行中。buffer：该值表示一个比indeterminate更复杂的进度模型。它有两部分，进度刻度和缓冲刻度。query：该值表示一个循环动画，用于表示应用程序正在等待一些操作的完成。
默认值是 indeterminate。
value
value 属性是 determinate 变体中的可选属性。它告诉控件当前的值，取值应在 0 到 100 范围内。
默认值是 0。
示例代码
默认配置
<LinearProgress />
指定颜色
<LinearProgress color="secondary" />
指定进度
<LinearProgress progress={50} />指定进度和缓冲进度
<LinearProgress progress={50} buffer={80} />指定缓冲进度（双缓冲进度）
请注意，双缓冲进度需要在
variant属性中指定为buffer。
<LinearProgress variant="buffer" buffer="60, 90" />
指定值
<LinearProgress variant="determinate" value={50} />指定为待处理
请注意，待处理进度需要在
variant属性中指定为query。
<LinearProgress variant="query" />
总结
在本文中，我们学习了如何使用@react.material/linear-progress 包创建自己的 Material Design 风格线性进度条。我们了解了 LinearProgress 组件的属性和用法，并提供了适用于不同场景的示例代码。希望这篇文章能够帮助您更好地使用 React 和@react.material/linear-progress 包。
如果您对 React 或 Material Design 有更深入的了解，也欢迎在评论中留下您的见解和经验分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571bc81e8991b448e8349