开关

开关是 UI 元素，允许用户在两种状态之间进行选择——最常见的是开/关。

介绍

Switch 组件为用户提供了一个在两种互斥状态之间切换的开关。

组件

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

解剖结构

Switch 组件由一个根 <span> 组成，该根包含三个内部插槽——一个轨道、一个滑块和一个输入

<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 属性来覆盖根插槽或任何其他内部插槽

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

使用 slotProps 属性将自定义属性传递给内部插槽。以下代码段将名为 my-thumb 的 CSS 类应用于滑块插槽

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

TypeScript 中的用法

在 TypeScript 中，您可以将 slots.root 中使用的自定义组件类型指定为非样式化组件的泛型参数。这样，您可以安全地直接在组件上提供自定义根的属性

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

这同样适用于特定于自定义原始元素的属性

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

Hook

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

useSwitch Hook 允许您将 Switch 的功能应用于完全自定义的组件。它返回要放置在自定义组件上的属性，以及表示组件内部状态的字段。

Hook 不支持 插槽属性，但它们支持自定义属性。

基本示例

自定义外观和感觉

可访问性

为了使 Switch 组件可访问，您应确保相应的标签反映 Switch 的当前状态。