跳到主要内容跳到主要内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

ToggleButtonGroupAPI

React ToggleButtonGroup 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
// or
import { ToggleButtonGroup } from '@mui/joy';

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。



⚠️ ToggleButtonGroup 必须将 Button 和/或 IconButton 作为直接子元素。

Props

原生组件的 Props 也可用。

名称类型默认值描述
buttonFlexnumber
| string		-

按钮的 flex 值。

childrennode-

如果未设置 src，则用于在 ButtonGroup 内部渲染图标或文本元素。这可以是一个元素，或者只是一个字符串。

color'danger'
| 'info'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

组件的颜色。它支持对该组件有意义的主题颜色。

要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

disabledboolfalse

如果为 true，则所有按钮都将被禁用。

onChangefunc-

当值更改时触发的回调。

签名:function(event: React.MouseEvent, value: any) => void
  • event 回调的事件源。
  • value 所选按钮的值。当 exclusive 为 true 时，这是一个单值；当为 false 时，是所选值的数组。如果未选择任何值且 exclusive 为 true，则该值为 null；当为 false 时，为空数组。
orientation'horizontal'
| 'vertical'		'horizontal'

组件方向。

size'sm'
| 'md'
| 'lg'		'md'

组件的尺寸。它接受 'sm' 和 'lg' 之间的主题值。

要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。

slotProps{ root?: func
| object }		{}

用于内部每个插槽的 props。

slots{ root?: elementType }{}

用于内部每个插槽的组件。

有关更多详细信息，请参阅下面的插槽 API。

spacingArray<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string		0

定义类型为 item 的组件之间的间距。它只能在类型为 container 的组件上使用。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参阅 `sx` 页面。

valueArray<string>
| string		-

组内当前选定的值或所选值的数组。
该值必须与选项具有引用相等性才能被选中。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'outlined'

要使用的全局变体。

要了解如何添加您自己的变体，请查看主题组件—扩展变体。

ref 被转发到根元素。

主题默认 Props

您可以使用 JoyToggleButtonGroup 通过主题更改此组件的默认 props。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiToggleButtonGroup-root'div'渲染根节点的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。

类名规则名称描述
.MuiToggleButtonGroup-colorContextcolorContext当颜色反转被触发时，应用于根元素的类名。
.MuiToggleButtonGroup-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiToggleButtonGroup-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiToggleButtonGroup-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiToggleButtonGroup-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiToggleButtonGroup-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiToggleButtonGroup-horizontalhorizontal如果 orientation="horizontal"，则应用于根元素的类名。
.MuiToggleButtonGroup-sizeLgsizeLg如果 size="lg"，则应用于根元素的类名。
.MuiToggleButtonGroup-sizeMdsizeMd如果 size="md"，则应用于根元素的类名。
.MuiToggleButtonGroup-sizeSmsizeSm如果 size="sm"，则应用于根元素的类名。
.MuiToggleButtonGroup-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiToggleButtonGroup-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiToggleButtonGroup-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiToggleButtonGroup-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。
.MuiToggleButtonGroup-verticalvertical如果 orientation="vertical"，则应用于根元素的类名。

您可以使用以下自定义选项之一来覆盖组件的样式

源代码

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。