React MUI 切换按钮输入

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>
JavaScript

创建React项目:

步骤1: 要创建一个React应用程序,您需要通过npm命令安装React模块。

npm create-react-app project name
JavaScript

步骤2: 创建完你的React项目后,进入文件夹执行不同的操作。

cd project name
JavaScript

步骤3: 创建完ReactJS应用后,使用以下命令安装所需模块:

npm install @mui/material @emotion/react @emotion/styled
JavaScript

项目结构:

React MUI 切换按钮输入

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

npm start
JavaScript

示例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; 
JavaScript

输出:

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; 
JavaScript

输出:

React MUI 切换按钮输入

参考文献: https://mui.com/material-ui/react-toggle-button/

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册