react Material UI 版本5.12.2 ButtonGroup组 完整中文文档

React Material UI 的 ButtonGroup 组件是一个用于组合多个按钮的组件。它可以使多个按钮在视觉上形成一组，从而使用户更容易识别它们之间的相关性。以下是 ButtonGroup 组件的完整中文文档：

# ButtonGroup

用于呈现一组按钮。

## 引入

import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';

或

import { ButtonGroup, Button } from '@mui/material';

## 示例

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

## API

### ButtonGroup Props

| 名称 | 类型 | 默认值 | 描述 |
| ------------ | ------------------------------ | ------ | -------------------------------------------------------------------------------------------------------------- |
| children | node | | 要呈现的按钮 |
| color | 'default' \| 'inherit' \| 'primary' \| 'secondary' | 'primary' | 按钮的颜色 |
| disableElevation | bool | false | 是否禁用按钮海拔高度 |
| disableFocusRipple | bool | false | 是否禁用按钮的聚焦涟漪效果 |
| disabled | bool | false | 是否禁用按钮 |
| fullWidth | bool | false | 是否使按钮组的宽度为 100% |
| size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮的大小 |
| sx | SxProps<Theme> | | 应用于根元素的样式 |
| variant | 'text' \| 'contained' \| 'outlined' | 'outlined' | 按钮的类型 |

继承自 [ButtonBaseProps](/api/button-base/#props)

| 名称 | 类型 | 默认值 | 描述 |
| ------------ | ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------- |
| centerRipple | bool | false | 是否在按钮中心显示涟漪效果 |
| component | elementType \| string | 'button' | 组件或 HTML 标签名称，该组件应用于根元素。如果未提供，则将使用默认的 button 元素。 |
| disabled | bool | false | 是否禁用按钮 |
| disableRipple | bool | false | 是否禁用按钮的涟漪效果 |
| focusRipple | bool | true | 是否在聚焦按钮时显示涟漪效果 |
| onFocusVisible | func | | 调用聚焦可见时的回调函数。参数：event: object。 |
| tabIndex | oneOfType([number, string]) | | 根元素的 tabIndex 属性 |

## 注意事项

请注意，ButtonGroup 组件仅用于组合 Button 组件。如果您需要呈现其他类型的内容，请考虑使用其他组件，如 Grid 或 Flexbox。