数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 Material UI 的复选框中添加标签？
复选框是用户界面中的一个关键组件，使用户可以轻松选择选项或表达偏好。有时，用户会看到多个选项可供选择，如果没有合适的标签，他们可能会感到困惑。为了解决这个问题，可以使用广受欢迎的 React 组件库 Material UI 将复选框轻松优雅地添加到应用程序中。尽管 Material UI 中的复选框默认情况下没有标签，但这有时会导致用户混淆。
在本文中，我们将学习如何在 Material UI 中创建加载按钮。在深入研究本文之前，我们需要创建一个 React 项目并将 Material UI 安装到其中。因此，让我们开始并查看创建加载按钮的完整过程。
什么是 Material UI 中的复选框？
用户可以切换一个称为复选框或选择框的小型交互式框来指示是或否的决定。它也可以在 Material UI 中找到，作为一个预构建的组件，无需任何额外的 javascript 或功能即可使用，尽管它经常出现在 HTML 输入表单中。
复选框标签 API
<Checkbox> - 此 API 用于使用 Material UI 向项目添加复选框组件功能
<FormGroup> - 此 API 提供紧凑的行布局，有助于包装不同的表单控件，包括复选框。
<FormControlLabel> - 此 API 用于向组件（如单选按钮、复选框和开关组件）添加额外的标签。
添加复选框标签的步骤
以下是使用 React 在 Material UI 中向复选框添加标签的完整步骤：
步骤 1：创建一个新的 React 应用程序并安装 MUI
首先，我们必须拥有一个安装了 Material UI 的 React 应用程序。让我们通过运行以下命令来创建一个新的 React 应用程序并安装 Mui：
npx create-react-app myproject cd myproject npm install @mui/material @emotion/react @emotion/styled
步骤 2：定义一个 React 组件
现在，当创建新的 React 应用程序时，在 src 文件夹中有一个 main App.js 文件。打开它，并添加以下代码：
import React from "react";
export default function App() {
return (
…
)
}
步骤 3：导入所需的组件
一旦我们定义了新的组件，就该导入向复选框添加标签所需的不同的组件了。
import { FormGroup, FormControlLabel', Checkbox } from '@mui/material
上面已经讨论了 Material UI 中所有这些组件的详细说明。
步骤 4：向复选框添加标签
要在使用 Material UI 的 React 中将标签添加到复选框中，我们遵循以下步骤。首先，我们使用 FormGroup 组件来分组复选框。然后，我们使用 FormControlLabel 来显示标签以及每个复选框。例如，我们将探讨标记复选框的方法。
<FormGroup>
<FormControlLabel control={<Checkbox />} label="Add your labels here…" />
…
</FormGroup>
示例
在这个例子中，我们创建了标签，而没有使用 FormGroup 或 FormControlLabel API。在 span 标签内，我们使用 label 标签来显示复选框标签和复选框，它将其呈现为一行 flex，作为原始复选框标签。
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<span style={{display: "flex", justifyContent: 'center', alignItems: 'center'}}>
<label style={{fontSize: 20, color: 'green'}}>Custom label 1</label>
<Checkbox color="success" />
</span>
<span style={{display: "flex", justifyContent: 'center', alignItems: 'center'}}>
<label style={{fontSize: 20, color: 'red'}}>Custom label 2</label>
<Checkbox color="error" />
</span>
<span style={{display: "flex", justifyContent: 'center', alignItems: 'center'}}>
<label style={{fontSize: 20, color: 'blue'}}>Custom label 3</label>
<Checkbox color="info" />
</span>
</div>
);
}
输出
示例
在这个例子中，我们使用 FormGroup 或 FormControlLabel API 创建了标签。为了添加标签，我们使用了 FormControlLabel 组件，它首先呈现控件 - 复选框，除此之外，它还呈现复选框的标签。
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel control={<Checkbox defaultChecked />} label="Allow comments" />
<FormControlLabel control={<Checkbox />} label="Don't allow comments" />
<FormControlLabel required control={<Checkbox />} label="Like the video" />
<FormControlLabel required control={<Checkbox />} label="Subscribe" />
</FormGroup>
</div>
);
}
输出
示例
在这个例子中，我们使用了 FormGroup 或 FormControlLabel API 来生成标签。标签是使用 FormControlLabel 组件添加的，该组件不仅显示复选框，还包括它们的标签。此外，我们还使用了 labelPlacement 属性来修改标签位置，允许它们放置在顶部、底部、开头或结尾。
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
control={<Checkbox defaultChecked color="success" />}
label="Allow comments"
labelPlacement="start"
/>
<FormControlLabel
control={<Checkbox color="error" />}
label="Don't allow comments"
labelPlacement="top"
/>
<FormControlLabel
required
control={<Checkbox color="success" />}
label="Subscribe"
labelPlacement="end"
/>
<FormControlLabel
required
control={<Checkbox color="info" />}
label="Like the video"
labelPlacement="bottom"
/>
</FormGroup>
</div>
);
}
输出
示例
在这个例子中，我们使用了 FormGroup 或 FormControlLabel API 来生成标签。为了包含标签，我们使用 FormControlLabel 组件。此组件呈现复选框及其相应的标签。在我们的例子中，我们使用 sx 属性自定义了标签的外观，该属性应用样式，从 MuiFormControlLabel label 类到控制因素，例如颜色、fontWeight、fontSize 等。
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
control={<Checkbox defaultChecked color="success" />}
label="Allow comments"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'green',
fontSize: '20px',
fontWeight: 'bold'
},
}}
/>
<FormControlLabel
control={<Checkbox color="error" />}
label="Don't allow comments"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'red',
fontWeight: 'bold',
fontSize: '20px',
},
}}
/>
<FormControlLabel
required
control={<Checkbox color="success" />}
label="Subscribe"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'green',
fontWeight: 'bold',
fontSize: '20px',
},
}}
/>
<FormControlLabel
required
control={<Checkbox color="info" />}
label="Like the video"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'skyblue',
fontWeight: 'bold',
fontSize: '20px',
},
}}
/>
</FormGroup>
</div>
);
}
输出
结论
在本文中，我们了解了如何在 Material UI 中向复选框添加标签。我们学习了完整的逐步过程，还了解了使用 Material UI 在 React 中添加或自定义标签的不同方法。为了使您的复选框和标签与应用程序的设计或 UI 匹配并通常增强用户体验，请记住自定义是必不可少的，为此，我们也看到了在示例中 sx 属性的使用。
467 次浏览
