SwitchAPI

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

範例

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

Switch

Import

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

閱讀關於最小化套件大小的指南，以瞭解差異。

Props

原生元件的 Props 也可用。

名稱	類型	預設值	描述
checked	bool	-	若 `true`，則元件會被勾選。
color	'danger' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	元件的顏色。它支援適用於此元件的主題顏色。若要瞭解如何新增您自己的顏色，請查看主題元件—擴展顏色。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串或元件。
defaultChecked	bool	-	預設的勾選狀態。當元件不受控制時使用。
disabled	bool	-	若 `true`，則元件會停用。
endDecorator	node \| func	-	顯示在 switch 結尾的元素。
onChange	func	-	狀態變更時觸發的回呼函式。簽章：`function(event: React.ChangeEvent) => void` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (字串) 來取出新值。您可以透過存取 `event.target.checked` (布林值) 來取出新的勾選狀態。
readOnly	bool	-	若 `true`，則元件為唯讀。
required	bool	-	若 `true`，則 `input` 元素為必填。
size	'sm' \| 'md' \| 'lg' \| string	'md'	元件的大小。若要瞭解如何將自訂大小新增至元件，請查看主題元件—擴展尺寸。
slotProps	{ action?: func \| object, endDecorator?: func \| object, input?: func \| object, root?: func \| object, startDecorator?: func \| object, thumb?: func \| object, track?: func \| object }	{}	用於每個內部 slot 的 props。
slots	{ action?: elementType, endDecorator?: elementType, input?: elementType, root?: elementType, startDecorator?: elementType, thumb?: elementType, track?: elementType }	{}	用於每個內部 slot 的元件。請參閱下方的Slots API 以瞭解更多詳細資訊。
startDecorator	node \| func	-	顯示在 switch 結尾的元素。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱`sx` 頁面以瞭解更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'solid'	要使用的全域 variant。若要瞭解如何新增您自己的 variants，請查看主題元件—擴展 variants。

ref 會轉發到根元素。

主題預設 props

您可以使用 JoySwitch 透過主題變更此元件的預設 props。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.MuiSwitch-root	`'div'`	呈現根的元件。
thumb	.MuiSwitch-thumb	`'span'`	呈現 thumb 的元件。
action	.MuiSwitch-action	`'div'`	呈現 action 的元件。
input	.MuiSwitch-input	`'input'`	呈現 input 的元件。
track	.MuiSwitch-track	`'span'`	呈現 track 的元件。
startDecorator	.MuiSwitch-startDecorator	`'span'`	呈現 start decorator 的元件。
endDecorator	.MuiSwitch-endDecorator	`'span'`	呈現 end decorator 的元件。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-checked		套用至根目錄 `checked` 類別的狀態類別。
.Mui-disabled		套用至根目錄 disabled 類別的狀態類別。
.Mui-focusVisible		如果 switch 具有可見焦點，則套用至根元素的狀態類別
.Mui-readOnly		如果 switch 為唯讀，則套用至根元素的類別名稱
.MuiSwitch-colorContext	colorContext	當觸發顏色反轉時，套用至根元素的類別名稱。
.MuiSwitch-colorDanger	colorDanger	若 `color="danger"`，則套用至根元素的類別名稱。
.MuiSwitch-colorPrimary	colorPrimary	若 `color="primary"`，則套用至根元素的類別名稱。
.MuiSwitch-colorSuccess	colorSuccess	若 `color="success"`，則套用至根元素的類別名稱。
.MuiSwitch-colorWarning	colorWarning	若 `color="warning"`，則套用至根元素的類別名稱。
.MuiSwitch-sizeLg	sizeLg	若 `size="lg"`，則套用至根元素的類別名稱。
.MuiSwitch-sizeMd	sizeMd	若 `size="md"`，則套用至根元素的類別名稱。
.MuiSwitch-sizeSm	sizeSm	若 `size="sm"`，則套用至根元素的類別名稱。
.MuiSwitch-variantOutlined	variantOutlined	若 `variant="outlined"`，則套用至根元素的類別名稱。
.MuiSwitch-variantSoft	variantSoft	若 `variant="soft"`，則套用至根元素的類別名稱。
.MuiSwitch-variantSolid	variantSolid	若 `variant="solid"`，則套用至根元素的類別名稱。

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

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

原始碼

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