ToggleButtonGroup API
想要学习更多组件属性和 CSS API，可以查阅 React ToggleButtonGroup 组件的 API 文档。
导入
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
// 或
import { ToggleButtonGroup } from '@mui/material';组件名称
The nameMuiToggleButtonGroup can be used when providing default props or style overrides in the theme.属性
原生（Native） 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| children | node | The content of the component. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| color | 'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | 'standard' | The color of the button when it is selected. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. |
| disabled | bool | false | If true, the component is disabled. This implies that all ToggleButton children will be disabled. |
| exclusive | bool | false | If true, only allow one of the child ToggleButton values to be selected. |
| fullWidth | bool | false | If true, the button group will take up the full width of its container. |
| onChange | func | Callback fired when the value changes. Signature: function(event: object, value: any) => voidevent: The event source of the callback. value: of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array. | |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The group orientation (layout flow direction). |
| size | 'small' | 'medium' | 'large' | string | 'medium' | The size of the autocomplete. |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| value | any | The currently selected value within the group or an array of selected values when exclusive is false.The value must have reference equality with the option in order to be selected. |
ref 则会被传递到根元素中。CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| root | .MuiToggleButtonGroup-root | Styles applied to the root element. |
| vertical | .MuiToggleButtonGroup-vertical | Styles applied to the root element if orientation="vertical". |
| disabled | .Mui-disabled | State class applied to the root element if disabled={true}. |
| grouped | .MuiToggleButtonGroup-grouped | Styles applied to the children. |
| groupedHorizontal | .MuiToggleButtonGroup-groupedHorizontal | Styles applied to the children if orientation="horizontal". |
| groupedVertical | .MuiToggleButtonGroup-groupedVertical | Styles applied to the children if orientation="vertical". |
您可以使用组件自定义选项对组件进行个性化：
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.