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: 它是组件的方向。
语法:
创建React项目:
步骤1: 要创建一个React应用程序,您需要通过npm命令安装React模块。
步骤2: 创建完你的React项目后,进入文件夹执行不同的操作。
步骤3: 创建完ReactJS应用后,使用以下命令安装所需模块:
项目结构:
运行应用程序的步骤: 在终端中打开,并输入以下命令。
示例1: 下面的示例演示了不同大小的React MUI独占选择切换按钮组件。
输出:
示例2: 下面的示例演示了React MUI垂直对齐的多选切换按钮。
输出:
参考文献: https://mui.com/material-ui/react-toggle-button/