React MUI进度反馈
React MUI 是一个UI库,提供了完整的组件,将我们自己的设计系统引入到我们的可生产组件中。MUI是一个用户界面库,提供预定义和可定制化的React组件,用于更快速和轻松的Web开发,这些MUI组件基于谷歌的Material Design。
在本文中,我们将讨论 React MUI进度反馈 。进度组件用于显示指示器,例如表示未指定的等待时间或显示过程的长度。
进度变体:
- 循环进度: 在此变体中,进度反馈以循环形式显示。它由循环不确定、循环颜色、循环确定、交互集成和带标签的循环组成。
- 线性进度: 在此变体中,进度反馈以线性形式显示。它由循环不确定、循环颜色、循环确定、线性缓冲区和带标签的循环组成。
非标准范围: 进度反馈仅接受0-100范围的值,但如果我们想添加一个超出范围的自定义值,我们也可以指定。
自定义: 进度反馈组件可以通过自定义样式进行定制。这包括更改大小、厚度、位置和动画值。
限制: 当进行重负载的CPU负荷、高频率更新等操作时,存在不正确的动画等限制。
API: 进度反馈组件中使用<CircularProgress />
和<LinearProgress />
。
语法:
<CircularProgress />
<LinearProgress />
创建React项目:
步骤1: 要创建一个React应用程序,通过npm命令安装React模块。
npm create-react-app project name
步骤2: 创建完React项目后,进入文件夹执行不同的操作。
cd project name
步骤3: 创建 ReactJS 应用后,使用以下命令安装所需的模块:
npm install @mui/material @emotion/react @emotion/styled
项目结构:
运行应用程序的步骤: 打开终端并输入以下命令。
npm start
示例1: 以下示例演示了React MUI圆形进度反馈。
import { CircularProgress } from "@mui/material";
import * as React from "react";
import { useState } from "react";
import { useEffect } from "react";
function App() {
const [progressValue, setProgressValue] = useState(0);
useEffect(() => {
const time = setInterval(() => {
setProgressValue((beforeProgress) =>
(beforeProgress >= 100 ? 0 : beforeProgress + 15));
}, 800);
return () => {
clearInterval(time);
};
}, []);
return (
<center>
<div>
<h1 style={{ color: "green" }}>
GeeksforGeeks
</h1>
<h2>React MUI Progress Feedback</h2>
</div>
<div>
<CircularProgress
color="success"
variant="indeterminate"
/>
<CircularProgress
variant="determinate"
color="primary"
value={progressValue}
/>
</div>
</center>
);
}
export default App;
输出:
示例2: 下面的示例演示了React MUI线性进展反馈。
import { LinearProgress } from "@mui/material";
import * as React from "react";
import { useState } from "react";
import { useEffect } from "react";
function App() {
const [progressValue, setProgressValue] = useState(10);
useEffect(() => {
const time = setInterval(() => {
setProgressValue((beforeProgress) =>
(beforeProgress >= 100 ? 0 : beforeProgress + 15));
}, 500);
return () => {
clearInterval(time);
};
}, []);
return (
<center>
<div>
<h1 style={{ color: "green" }}>
GeeksforGeeks
</h1>
<h2>React MUI Progress Feedback</h2>
</div>
<div>
<LinearProgress
variant="determinate"
color="error"
value={progressValue}
/>
</div>
</center>
);
}
export default App;
输出:
参考: https://mui.com/material-ui/react-progress/