ToggleButtonGroupAPI

React ToggleButtonGroup 元件的 API 參考文件。瞭解此匯出模組的屬性、CSS 和其他 API。

示範

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

Toggle Button

匯入

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

若要瞭解差異，請閱讀本指南，瞭解如何盡可能縮小套件大小。

屬性

原生元件的屬性也可用。

名稱	類型	預設值	描述
children	node	-	元件的內容。
classes	object	-	覆寫或擴充應用於元件的樣式。如需更多詳細資訊，請參閱下方的 CSS 類別 API。
color	'standard' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'standard'	按鈕在選取時的顏色。它同時支援預設和自訂主題色彩，這些色彩可以按照調色盤自訂指南中所示的方式新增。
disabled	bool	false	如果 `true`，則元件會停用。這表示所有 ToggleButton 子元件都將停用。
exclusive	bool	false	如果 `true`，則僅允許選取子 ToggleButton 值中的一個。
fullWidth	bool	false	如果 `true`，則按鈕群組將佔用其容器的完整寬度。
onChange	func	-	值變更時觸發的回呼。簽章：`function(event: React.MouseEvent, value: any) => void` `event` 回呼的事件來源。選取按鈕的 `value`。當 `exclusive` 為 true 時，這是單一值；當 false 時，這是選取值的陣列。如果未選取任何值且 `exclusive` 為 true，則值為 null；當 false 時，則為空陣列。
orientation	'horizontal' \| 'vertical'	'horizontal'	元件方向（版面配置流動方向）。
size	'small' \| 'medium' \| 'large' \| string	'medium'	元件的大小。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及其他 CSS 樣式。如需更多詳細資訊，請參閱 `sx` 頁面。
value	any	-	群組內目前選取的值，或當 `exclusive` 為 false 時選取值的陣列。值必須與選項具有參考相等性，才能選取。

ref 轉發到根元素。

主題預設屬性

您可以使用 MuiToggleButtonGroup，透過主題變更此元件的預設屬性。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled={true}`，則應用於根元素的狀態類別。
.Mui-selected		如果 `selected={true}`，則應用於根元素的狀態類別。
.MuiToggleButtonGroup-firstButton	firstButton	應用於切換按鈕群組中第一個按鈕的樣式。
.MuiToggleButtonGroup-fullWidth	fullWidth	如果 `fullWidth={true}`，則應用於根元素的樣式。
.MuiToggleButtonGroup-grouped	grouped	應用於子元件的樣式。
.MuiToggleButtonGroup-groupedHorizontal	groupedHorizontal	如果 `orientation="horizontal"`，則應用於子元件的樣式。已棄用－改為合併 .MuiToggleButtonGroup-horizontal 和 .MuiToggleButtonGroup-grouped 類別。如需更多詳細資訊，請參閱從已棄用的 API 遷移。
.MuiToggleButtonGroup-groupedVertical	groupedVertical	如果 `orientation="vertical"`，則應用於子元件的樣式。已棄用－改為合併 .MuiToggleButtonGroup-vertical 和 .MuiToggleButtonGroup-grouped 類別。如需更多詳細資訊，請參閱從已棄用的 API 遷移。
.MuiToggleButtonGroup-horizontal	horizontal	如果 `orientation="horizontal"`，則應用於根元素的樣式。
.MuiToggleButtonGroup-lastButton	lastButton	應用於切換按鈕群組中最後一個按鈕的樣式。
.MuiToggleButtonGroup-middleButton	middleButton	應用於切換按鈕群組中間按鈕的樣式。
.MuiToggleButtonGroup-root	root	應用於根元素的樣式。
.MuiToggleButtonGroup-vertical	vertical	如果 `orientation="vertical"`，則應用於根元素的樣式。

您可以使用下列其中一個自訂選項覆寫元件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為元件styleOverrides 屬性的一部分。

原始碼

如果您在本頁中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。