React MUI 切换按钮输入

React MUI 是一个UI库，提供完全加载的组件，将我们自己的设计系统带到我们的生产就绪组件中。MUI是一个用户界面库，提供预定义和可定制的React组件，用于更快速、更简单的Web开发，这些Material-UI组件是基于Google的Material Design。

在本文中，我们将讨论React MUI切换按钮输入。切换按钮用于分组相关选项。ToggleButtonGroup用于控制其子按钮的选中状态，当给定自己的value属性时。

React MUI切换按钮属性：

children： 类似于表格行的组件。
classes： 覆盖现有样式或向组件添加新样式。
component： 用于根节点的组件。
sx： 系统属性允许定义系统替代以及额外的CSS样式。
value： 在切换按钮组中选择时与按钮关联的值。
color： ToggleButton的颜色。
disabled： 如果设置为true，切换按钮将被禁用。
disableFocusRipple： 如果设置为true，禁用键盘聚焦涟漪效果。
fullWidth： 如果设置为true，切换按钮将占据容器的全部宽度。
onChange： 切换按钮更改时的回调函数。
onClick： 点击切换按钮时的回调函数。
selected： 如果设置为true，则按钮处于活动状态。
size： 指定按钮的大小。
sx： 允许定义系统替代以及额外的CSS样式。

React MUI切换按钮组属性：

children: 它是类似于表格行的组件。
classes: 它覆盖现有的样式或添加新的样式到组件中。
component: 它是用于根节点的组件。它可以是HTML字符串或组件。
value: 它表示按钮的值。
color: 它表示ToggleButton的颜色。
disabled: 如果设置为true，则ToggleButton将被禁用。
fullWidth: 如果设置为true，则ToggleButton将占据容器的整个宽度。
onChange: 当ToggleButton改变时的回调函数。
onClick: 当ToggleButton被点击时的回调函数。
selected: 如果设置为true，则按钮处于活动状态。
size: 它指定按钮的大小。
sx: 系统属性允许定义系统覆盖以及额外的CSS样式。
orientation: 它是组件的方向。

语法：

<ToggleButtonGroup>
    <ToggleButton value="left">
        ...
    </ToggleButton>
    <ToggleButton value="center">
        ...
    </ToggleButton>
</ToggleButtonGroup>

创建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

项目结构：

React MUI 切换按钮输入

运行应用程序的步骤： 在终端中打开，并输入以下命令。

npm start

示例1： 下面的示例演示了不同大小的React MUI独占选择切换按钮组件。

import React from "react"; 
import FormatAlignLeftIcon from  
    "@mui/icons-material/FormatAlignLeft"; 
import FormatAlignCenterIcon from  
    "@mui/icons-material/FormatAlignCenter"; 
import FormatAlignRightIcon from  
    "@mui/icons-material/FormatAlignRight"; 
import ToggleButton from "@mui/material/ToggleButton"; 
import ToggleButtonGroup from  
    "@mui/material/ToggleButtonGroup"; 
  
function App() { 
    const [align, setAlign] = React.useState(); 
  
    const handleAlignment = (event, newAlign) => { 
        setAlign(newAlign); 
    }; 
  
    function ButtonGroup({ size }) { 
        return ( 
            <ToggleButtonGroup 
                size={size} 
                value={align} 
                exclusive 
                onChange={handleAlignment} 
                aria-label="text alignment"
            > 
                <ToggleButton value="left" 
                    aria-label="left aligned"> 
                    <FormatAlignLeftIcon /> 
                </ToggleButton> 
                <ToggleButton value="center" 
                    aria-label="centered"> 
                    <FormatAlignCenterIcon /> 
                </ToggleButton> 
                <ToggleButton value="right" 
                    aria-label="right aligned"> 
                    <FormatAlignRightIcon /> 
                </ToggleButton> 
            </ToggleButtonGroup> 
        ); 
    } 
  
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Toggle Button Input</h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <ButtonGroup size="large" /> <br /><br /> 
                <ButtonGroup size="medium" /> <br /><br /> 
                <ButtonGroup size="small" /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI 切换按钮输入

示例2: 下面的示例演示了React MUI垂直对齐的多选切换按钮。

import React from "react"; 
import ToggleButton from "@mui/material/ToggleButton"; 
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"; 
import FormatBoldIcon from '@mui/icons-material/FormatBold'; 
import FormatItalicIcon from '@mui/icons-material/FormatItalic'; 
import FormatUnderlinedIcon from  
    '@mui/icons-material/FormatUnderlined'; 
  
function App() { 
    const [format, setFormat] = React.useState(() => ['bold']); 
  
    const handleFormat = (event, newFormat) => { 
        setFormat(newFormat); 
    }; 
  
    return ( 
        <div> 
            <div style={{ textAlign: "center",  
                color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Toggle Button Input</h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <ToggleButtonGroup 
                    value={format} 
                    onChange={handleFormat} 
                    aria-label="text formatting"
                    orientation="vertical"
                > 
                    <ToggleButton value="bold" 
                        aria-label="left aligned"> 
                        <FormatBoldIcon /> 
                    </ToggleButton> 
                    <ToggleButton value="italic" 
                        aria-label="centered"> 
                        <FormatItalicIcon /> 
                    </ToggleButton> 
                    <ToggleButton value="underline" 
                        aria-label="right aligned"> 
                        <FormatUnderlinedIcon /> 
                    </ToggleButton> 
                </ToggleButtonGroup> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI 切换按钮输入