開關

開關是 UI 元素，讓使用者可以在兩種狀態之間做選擇——最常見的是開啟/關閉。

簡介

Switch 元件為使用者提供一個開關，用於在兩種互斥的狀態之間切換。

元件

import { Switch } from '@mui/base/Switch';

結構組成

Switch 元件由一個根 <span> 組成，其中包含三個內部 slot——一個軌道、一個拇指和一個輸入

<span class="base-Switch-root">
  <span class="base-Switch-track"></span>
  <span class="base-Switch-thumb"></span>
  <input type="checkbox" class="base-Switch-input" />
</span>

自訂結構

使用 slots 屬性來覆寫根 slot 或任何其他內部 slot

<Switch slots={{ root: 'div', track: 'div' }} />

使用 slotProps 屬性將自訂 props 傳遞到內部 slot。以下程式碼片段將一個名為 my-thumb 的 CSS 類別應用於拇指 slot

<Switch slotProps={{ thumb: { className: 'my-thumb' } }} />

與 TypeScript 一起使用

在 TypeScript 中，您可以將 slots.root 中使用的自訂元件類型指定為非樣式化元件的泛型參數。這樣，您可以安全地在元件上直接提供自訂根元件的 props

<Switch<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

同樣適用於特定於自訂原始元素的 props

<Switch<'input'> slots={{ root: 'input' }} autoFocus={true} />

Hook

import { useSwitch } from '@mui/base/useSwitch';

useSwitch hook 讓您可以將 Switch 的功能應用於完全自訂的元件。它會傳回要放置在自訂元件上的 props，以及代表元件內部狀態的欄位。

Hook *不*支援slot props，但它們支援自訂 props。

基本範例

自訂外觀和風格

無障礙功能

為了使 Switch 元件具有無障礙功能，您應確保相應的標籤反映 Switch 的目前狀態。