数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在 Material UI 中更改切换按钮的方向、颜色和大小？
为了提供良好的用户体验，添加到网站的不同组件的颜色和大小起着重要的作用。React MUI 允许您使用文档中提供的一些 props 来轻松更改切换按钮的方向、颜色和大小。在本文中，我们将学习如何在 Material UI 中更改切换按钮的方向、颜色和大小。
但在深入了解更改这些属性的步骤之前，让我们首先了解切换按钮到底是什么。
什么是切换按钮？
切换按钮不仅在 MUI 中，而且在 Bootstrap 等各种其他 CSS 框架中都是非常流行的组件，它们提供了一种在两个或多个选项之间进行选择的方法。在 MUI 中，这些按钮统称为切换按钮组。一组连接的切换按钮应通过共享容器来突出显示。
ToggleButton API
ToggleButton API 用于将切换按钮集成到 React MUI 中。它带有以下 props：
value − 这非常重要，因为它在按钮及其选中状态之间建立了连接。
children − 我们可以使用“children” prop 在切换按钮中添加任何所需的内容。
classes − classes prop 用于覆盖组件的样式。
color − color prop 用于添加不同的切换按钮颜色。
disabled − 通过设置此 prop，我们可以禁用切换按钮的功能。
disableFocusRipple − disableFocusRipple prop 用于禁用键盘焦点涟漪效果。
fullWidth − fullWidth prop 用于向切换按钮添加全宽。
onChange − 它允许您定义一个回调函数，该函数在触发时会更改按钮状态。
onClick − 使用 onClick prop 指定在单击按钮时执行的回调函数。
selected − selected prop 用于呈现活动的切换状态。
size − size prop 用于更改切换按钮的大小。
sx − 要为此组件添加自定义样式，请使用“sx” prop。
更改功能所需的步骤
以下是更改 Material UI 中切换按钮方向、颜色和大小的步骤：
步骤 1：创建一个 React 应用程序
在 MUI 中更改切换按钮的给定功能的第一步是创建一个 React 应用程序。要创建一个新的 React 应用程序，请在您的终端中运行以下命令：
npx create react app togglebuttonsproject
项目创建后，通过运行以下命令导航到其目录：
cd togglebuttonsproject
步骤 2：将 MUI 添加到 React
创建 React 应用程序后，是时候将 Material UI 安装到 React 应用程序中了。要安装 MUI，请运行以下命令：
npm install @mui/material @emotion/react @emotion/styled
步骤 3：更改功能
要更改切换按钮的方向、大小和颜色，我们将使用一些 props，例如 orientation、size 和 color 以及它们各自的值。以下是相同的语法：
<ToggleButtonGroup orientation="vertical">
<ToggleButton color="success" >
<IconName />
</ToggleButton>
<ToggleButton size="medium" color="success" >
<IconName />
</ToggleButton>
</ToggleButtonGroup>
示例
在此示例中，我们只更改了切换按钮的颜色。为了更改颜色，我们使用了 'color' prop，它允许更改颜色，包括 success、primary、secondary、info、standard、warning 和 error。要更改切换按钮的颜色，我们必须在
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import CreateNewFolder from "@mui/icons-material/CreateNewFolder";
import Save from "@mui/icons-material/Save";
import CloudUpload from "@mui/icons-material/CloudUpload";
import Send from "@mui/icons-material/Send";
const App = () => {
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<ToggleButtonGroup aria-label="file creation" color="primary">
<ToggleButton color="info" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
<ToggleButton color="warning" value="send" aria-label="send">
<Send color="warning" />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
export default App;
输出
示例
在此示例中，我们更改了切换按钮的颜色和大小。为了更改大小，我们使用了 'size' prop，它允许更改大小，包括 small、medium 和 large。要更改切换按钮的大小，我们必须在
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import CreateNewFolder from "@mui/icons-material/CreateNewFolder";
import Save from "@mui/icons-material/Save";
import CloudUpload from "@mui/icons-material/CloudUpload";
const App = () => {
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<ToggleButtonGroup aria-label="file creation" color="primary">
<ToggleButton color="info" size="small" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" size="medium" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" size="large" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
export default App;
输出
示例
在此示例中，我们更改了切换按钮的方向。为了更改方向，我们使用了 'orientation' prop，它允许我们更改方向为垂直或水平方向。我们仅在 ToggleButtonGroup 组件中使用此 prop，因为这里有多个分组的切换按钮，这使得一次更改方向更容易。
//App.js file
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import CreateNewFolder from "@mui/icons-material/CreateNewFolder";
import Save from "@mui/icons-material/Save";
import CloudUpload from "@mui/icons-material/CloudUpload";
import Send from "@mui/icons-material/Send";
function App() {
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
width: 50
}}>
<ToggleButtonGroup orientation="vertical" aria-label="file-vertical" color="primary">
<ToggleButton color="info" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
<ToggleButton color="warning" value="send" aria-label="send">
<Send color="warning" />
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup orientation="horizontal" aria-label="horizontal" color="primary">
<ToggleButton color="info" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
<ToggleButton color="warning" value="send" aria-label="send">
<Send color="warning" />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
输出
结论
在本文中，我们学习了如何在 React MUI 中更改切换按钮的方向、颜色和大小。本文展示了更改给定功能的完整步骤以及语法。我们还看到了不同的示例，展示了如何在切换按钮中更改颜色、大小和方向。
743 次浏览
