开关

开关是调整设置的首选方式。它们用于控制二进制选项——比如开/关或真/假。

• 遵循：Switches - Material Design 3
• 继承自：ToggleButton

Interactive Demo

用法

开关可以是独立的或预选中的。

<md-switch aria-label="unchecked switch"></md-switch>
<md-switch aria-label="pre-checked switch" checked></md-switch>

图标

图标可用于在视觉上强调开关的选中状态。开关可以选择显示两个图标或仅显示选中的图标。

<md-switch icons></md-switch>
<md-switch icons checked></md-switch>

<md-switch icons checkedicononly></md-switch>
<md-switch icons checkedicononly checked></md-switch>

标签

使用 <label> 元素将标签与复选框关联。

<label>
  Wi-Fi
  <md-switch checked></md-switch>
</label>

<label for="switch-bluetooth">Bluetooth</label>
<md-switch id="switch-bluetooth"></md-switch>

无障碍

为没有标签的开关或需要更具描述性的标签的开关添加 aria-label 属性。

<md-switch aria-label="Lights"></md-switch>

<label>
  All
  <md-switch aria-label="All notifications"></md-switch>
</label>

注意：开关不会自动由 <label> 元素标记，始终需要 aria-label。

属性