极客教程React MUI LoadingButton API
Material UI 是一个展示使用react开发的不同组件的开源设计框架。它由谷歌自2014年开始开发和维护。
Material UI提供的LoadingButton API是什么？
由MUI提供的LoadingButton API与MUI提供的Button API类似，它们还提供了加载状态和禁用按钮的功能。
语法：
<LoadingButton> This ia a Loading Button </LoadingButton>
LoadingButton组件的属性：
- children ：表示LoadingButton组件的内容
- classes ：表示应用于组件的样式，覆盖默认样式
- disabled ：确定组件是否禁用
- loading ：确定是否在组件中显示加载指示器
- loadingIndicator ：在组件处于加载状态时，表示放在children之前的元素
- loadingPosition ：表示加载指示器在组件中的位置
- sx ：表示额外的CSS样式，覆盖默认的系统样式
- variant ：表示按钮组件的变体
创建React应用并安装模块
步骤1： 使用以下命令创建一个React应用：
npx create-react-app foldername
步骤2： 在创建你的项目文件夹 (例如文件夹名) 之后，使用以下命令移动到该文件夹：
cd foldername
步骤3： 在创建ReactJS应用程序后，使用以下命令安装所需的模块：
npm install @mui/material
npm install @mui/system
npm install @mui/lab
npm install @mui/icons-material
项目结构: 它将如下所示。
示例1 ：现在，让我们通过创建不同的按钮来利用 LoadingButton API，并且每个按钮的 loading 属性都设置为 true，但是 loadingIndicator 属性不同。请按照以下方式修改你的 App.js 文件：
import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import SaveIcon from '@mui/icons-material/Save';
import { Grid } from '@mui/material';
export default function App() {
return (
<Grid container gap={2}>
<LoadingButton loading variant="outlined">
Loading
</LoadingButton>
<LoadingButton loading
loadingIndicator="Loading"
variant="outlined">
Loading
</LoadingButton>
<LoadingButton
loading
loadingPosition="start"
startIcon={<SaveIcon />}
variant="outlined"
>
Loading
</LoadingButton>
</Grid>
);
}
运行应用的步骤：
打开终端并输入以下命令。
npm start
输出：
示例2： 现在，让我们用受控的加载状态来创建不同的按钮。这里，按钮加载的状态将由一个切换开关来控制。将你的App.js更改如下：
import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import SaveIcon from '@mui/icons-material/Save';
import SendIcon from '@mui/icons-material/Send';
export default function App() {
const [loading, setLoading] = React.useState(true);
function handleClick() {
setLoading(true);
}
return (
<Box>
<FormControlLabel
sx={{
display: 'block',
}}
control={
<Switch
checked={loading}
onChange={() => setLoading(!loading)}
name="loading"
color="primary"
/>
}
label="Loading"
/>
<Box sx={{ '& > button': { m: 1 } }}>
<LoadingButton
size="small"
onClick={handleClick}
loading={loading}
variant="outlined"
disabled
>
disabled
</LoadingButton>
<LoadingButton
size="small"
onClick={handleClick}
loading={loading}
loadingIndicator="Loading…"
variant="outlined"
>
Fetch data
</LoadingButton>
<LoadingButton
size="small"
onClick={handleClick}
endIcon={<SendIcon />}
loading={loading}
loadingPosition="end"
variant="contained"
>
Send
</LoadingButton>
<LoadingButton
size="small"
color="secondary"
onClick={handleClick}
loading={loading}
loadingPosition="start"
startIcon={<SaveIcon />}
variant="contained"
>
Save
</LoadingButton>
</Box>
<Box sx={{ '& > button': { m: 1 } }}>
<LoadingButton
onClick={handleClick}
loading={loading}
variant="outlined"
disabled
>
disabled
</LoadingButton>
<LoadingButton
onClick={handleClick}
loading={loading}
loadingIndicator="Loading…"
variant="outlined"
>
Fetch data
</LoadingButton>
<LoadingButton
onClick={handleClick}
endIcon={<SendIcon />}
loading={loading}
loadingPosition="end"
variant="contained"
>
Send
</LoadingButton>
<LoadingButton
color="secondary"
onClick={handleClick}
loading={loading}
loadingPosition="start"
startIcon={<SaveIcon />}
variant="contained"
>
Save
</LoadingButton>
</Box>
</Box>
);
}
运行应用程序的步骤： 打开终端并输入以下命令。
npm start
输出：
