Material Design Lite Switch 开关组件从标记结构、配置类到源码实现【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-liteMDLMaterial Design Lite的switch 开关组件是对原生 HTMLinput typecheckbox的视觉与交互增强它把复选框改造成一条横向轨道加圆形滑块的形态用左侧/灰色表示关闭、右侧/主色表示开启的直观隐喻承载二值状态。本文以 src/switch/README.md 为主线完整讲解开关组件的标记结构、配置类、禁用态与涟漪效果并结合 switch.js、_switch.scss 与单元测试 test/unit/switch.js 深入其升级机制与状态同步原理读完即可在任意页面中落地一个可访问、可编程控制的开关组件。组件定位为什么用 Switch 取代部分 Checkbox在 Material Design 的交互体系里开关switch与复选框checkbox都属于选择控件但适用场景不同。开关更适合表达即时生效、二元对立的设置项——比如声音开/关、Wi‑Fi 启用/停用用户点击后状态立即切换复选框则更多用于批量选择或提交后才生效的选项。MDL 的 switch 组件具备以下特征见 src/switch/README.md由标准input typecheckbox增强而来保持原生语义与键盘可达性视觉上由轨道 滑块构成off 时滑块居左且轨道为灰色on 时滑块居右且轨道、滑块染上主题主色支持单个或成组使用彼此独立选中/取消选中可附加ripple 点击涟漪效果支持初始或编程方式的disabled 禁用态。!-- 未开启的开关 -- label forswitch-2 classmdl-switch mdl-js-switch mdl-js-ripple-effect input typecheckbox idswitch-2 classmdl-switch__input span classmdl-switch__label关闭/span /label !-- 已开启的开关input 带 checked -- label forswitch-1 classmdl-switch mdl-js-switch mdl-js-ripple-effect input typecheckbox idswitch-1 classmdl-switch__input checked span classmdl-switch__label开启/span /label上述两个完整可运行的示例分别对应仓库中的 src/switch/snippets/switch-off.html 与 src/switch/snippets/switch-on.html。四步构建一个 MDL Switch按 src/switch/README.md 给出的步骤从零搭建开关组件只需四步。核心原则是始终用label包裹原生 checkbox并把 MDL 增强类挂在对应的标签、输入框和说明文字上这样即使 JS 未加载原生复选框依然可用渐进增强。第 1 步编写label元素并设置for属性其值等于将要包含的开关的idlabel forswitch1 ... /label第 2 步在 label 内部编写input元素type为checkboxid与 label 的for保持一致label forswitch1 input typecheckbox idswitch1 /label第 3 步在 checkbox 之后编写span元素作为开关的文字说明captionlabel forswitch1 input typecheckbox idswitch1 spanSound off/on/span /label第 4 步为 label、input、span 添加 MDL 类名用空格分隔的多个类label forswitch1 classmdl-switch mdl-js-switch input typecheckbox idswitch1 classmdl-switch__input span classmdl-switch__labelSound off/on/span /label完成后组件即可直接使用。原文档还给出了带涟漪点击效果的完整示例label forswitch1 classmdl-switch mdl-js-switch mdl-js-ripple-effect input typecheckbox idswitch1 classmdl-switch__input span classmdl-switch__labelSound off/on/span /label标记要点for/id配对不是装饰它让点击 label 任意位置包括说明文字都能切换复选框也保证屏幕阅读器能正确朗读mdl-js-switch是升级触发器组件注册后MDL 的componentHandler会扫描 DOM 中带该类的元素并执行升级向 label 内动态注入轨道、滑块等视觉节点详见下文源码分析不要忘记给mdl-switch__label填充实际文字否则视觉上只剩轨道与滑块可参照 snippets 目录中的示例结构。配置选项五个 MDL 类的职责与放置位置下表完整摘录自 src/switch/README.md 的配置说明列出了全部可用类及其作用MDL 类作用备注mdl-switch将 label 定义为 MDL 组件必须加在 label 元素上mdl-js-switch为 label 赋予基础的 MDL 行为触发升级必须加在 label 元素上mdl-switch__input将基础 MDL 行为应用到开关本体必须加在 input 元素复选框上mdl-switch__label将基础 MDL 行为应用到说明文字必须加在 span 元素caption上mdl-js-ripple-effect启用涟漪点击效果可选加在 label 元素上而非 input 元素开关上注意事项mdl-js-ripple-effect只加在 label 上同时组件会以编程方式在内部追加涟漪容器渲染时配合 src/ripple/ripple.js 与 src/ripple/_ripple.scss 产生点击波纹缺任何一个必需类都会导致样式或行为不完整例如只加mdl-switch不加mdl-js-switch时原生复选框会直接显示不会被升级成视觉开关。禁用状态文档同时强调所有开关形态都提供禁用版本通过标准 HTML 布尔属性disabled触发input typecheckbox idswitch5 classmdl-switch__input disabled该属性既可以在标记中静态声明也可以通过脚本编程式地添加或移除。结合源码看禁用状态会被同步为 label 上的is-disabled状态类进而触发_switch.scss中灰化轨道与滑块、取消指针光标cursor: auto的样式。源码视角升级过程与状态同步原理组件注册与升级入口src/switch/switch.js 定义MaterialSwitch构造器并通过 MDL 组件设计模式注册componentHandler.register({ constructor: MaterialSwitch, classAsString: MaterialSwitch, cssClass: mdl-js-switch, widget: true });cssClass: mdl-js-switch即升级触发器当componentHandler.upgradeElement检测到元素带有mdl-js-switch类时就会实例化MaterialSwitch并挂到元素的MaterialSwitch属性上对应测试中$(el).data(upgraded, ,MaterialSwitch)的断言。init动态注入视觉节点init()src/switch/switch.js 的init方法会通过querySelector(.mdl-switch__input)找到复选框然后用 JavaScript 动态创建轨道mdl-switch__track、滑块mdl-switch__thumb和焦点辅助圆mdl-switch__focus-helper追加在滑块内部var track document.createElement(div); track.classList.add(this.CssClasses_.TRACK); var thumb document.createElement(div); thumb.classList.add(this.CssClasses_.THUMB); var focusHelper document.createElement(span); focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER); thumb.appendChild(focusHelper); this.element_.appendChild(track); this.element_.appendChild(thumb);如果 label 包含mdl-js-ripple-effect还会额外创建mdl-switch__ripple-container与mdl-ripple节点并注入 label。最后在inputElement_上监听change、focus、blur在 label 上监听mouseup并调用updateClasses_()、追加is-upgraded类。注意升级后的原生 input 会被 CSS 隐藏opacity: 0、宽高为 0但仍参与焦点与表单交互见 _switch.scss 中.mdl-switch.is-upgraded 规则——这正是视觉隐藏、语义保留的关键设计。状态如何同步到视觉核心是updateClasses_()src/switch/switch.js 的updateClasses_方法它依次调用两个公开方法checkDisabled()读取inputElement_.disabled有则给 label 加is-disabled否则移除checkToggleState()读取inputElement_.checked为真则加is-checked否则移除。is-checked状态类驱动_switch.scss中的颜色与位置变换——滑块从left: 0动画滑到left: $switch-track-length - $switch-thumb-size即 36px − 20px 16px轨道与滑块背景色切换为主色阴影由shadow-2dp升为shadow-3dp动画时长 0.28s.mdl-switch__thumb { include material-animation-default(0.28s); transition-property: left; .mdl-switch.is-checked { background: $switch-thumb-color; left: $switch-track-length - $switch-thumb-size; include shadow-3dp(); } }这段样式位于 src/switch/_switch.scss尺寸与颜色常量集中在 src/_variables.scss变量默认值含义$switch-track-length36px轨道长度$switch-track-height14px轨道高度$switch-thumb-size20px滑块直径$switch-label-height24px标签行高$switch-ripple-size48px2×24px涟漪容器直径$switch-thumb-color/$switch-track-color主题主色$color-primary开启态颜色$switch-off-thumb-colorpalette-grey-50关闭态滑块色$switch-off-track-color黑色 26% 透明度关闭态轨道色$switch-disabled-thumb-colorpalette-grey-400禁用态滑块色$switch-disabled-track-color黑色 12% 透明度禁用态轨道色由于$switch-color派生自全局的$color-primary见 src/_variables.scss 中的$switch-color: rgb(#{$color-primary})开关开启态颜色会自动跟随主题主色无需单独配置。编程式控制公开 API 一览MaterialSwitch暴露了 5 个公开方法src/switch/switch.js升级完成后可通过element.MaterialSwitch直接调用方法作用checkDisabled()依据 input 的disabled属性同步is-disabled状态类checkToggleState()依据 input 的checked属性同步is-checked状态类disable()将 input 置为disabled true并刷新状态类enable()将 input 置为disabled false并刷新状态类on()将 input 置为checked true并刷新状态类off()将 input 置为checked false并刷新状态类典型用法var switchEl document.querySelector(.mdl-switch); // 开启 switchEl.MaterialSwitch.on(); // 禁用 switchEl.MaterialSwitch.disable(); // 读取当前状态input 才是状态的真正持有者 var isOn switchEl.querySelector(.mdl-switch__input).checked;由于on/off直接修改 input 的checked随后触发的change事件会再次调用updateClasses_()保证编程操作与用户点击两条路径最终都收敛到同一套状态同步逻辑。blur_()中为绕开blur 后焦点事件被重新触发的问题而使用window.setTimeout(..., 0.001)的细节见 src/switch/switch.js 的blur_方法也展示了组件对交互边界情况的处理。单元测试行为约定的可验证证据test/unit/switch.js 用 Mocha Chai 固化了组件的核心行为可作为接入时的契约参考MaterialSwitch在全局可用expect(MaterialSwitch).to.be.a(function)componentHandler.upgradeElement(el, MaterialSwitch)后元素带upgraded数据标记给 input 置disabled true并调用checkDisabled()后label 类名变为mdl-switch mdl-js-switch is-upgraded is-disabled给 input 置checked true并调用checkToggleState()后label 类名变为mdl-switch mdl-js-switch is-upgraded is-checked。测试中的createSwitch()构造结构与 README 的标记模板完全一致label input span说明文档、源码与测试三者的标记契约是统一的读者可以放心照抄。小结与实战建议标记即契约mdl-switch、mdl-js-switch、mdl-switch__input、mdl-switch__label四个类缺一不可涟漪类mdl-js-ripple-effect按需附加在 label 上表单友好底层仍是标准 checkboxname/value/checked照常参与表单提交升级后视觉节点由 JS 注入无 JS 时退化回原生复选框状态可控disabled属性支持静态声明与编程增删公开 APIon/off/disable/enable可驱动任意业务逻辑主题联动开启态颜色自动继承主题主色$color-primary尺寸常量可在 src/_variables.scss 中按需覆写。如需查看完整示例可直接运行仓库中 src/switch/snippets/switch-on.html 与 src/switch/snippets/switch-off.html想深入组件注册机制可继续阅读 src/mdlComponentHandler.js 与 src/ripple/ripple.js。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Material Design Lite Switch 开关组件从标记结构、配置类到源码实现【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-liteMDLMaterial Design Lite的switch 开关组件是对原生 HTMLinput typecheckbox的视觉与交互增强它把复选框改造成一条横向轨道加圆形滑块的形态用左侧/灰色表示关闭、右侧/主色表示开启的直观隐喻承载二值状态。本文以 src/switch/README.md 为主线完整讲解开关组件的标记结构、配置类、禁用态与涟漪效果并结合 switch.js、_switch.scss 与单元测试 test/unit/switch.js 深入其升级机制与状态同步原理读完即可在任意页面中落地一个可访问、可编程控制的开关组件。组件定位为什么用 Switch 取代部分 Checkbox在 Material Design 的交互体系里开关switch与复选框checkbox都属于选择控件但适用场景不同。开关更适合表达即时生效、二元对立的设置项——比如声音开/关、Wi‑Fi 启用/停用用户点击后状态立即切换复选框则更多用于批量选择或提交后才生效的选项。MDL 的 switch 组件具备以下特征见 src/switch/README.md由标准input typecheckbox增强而来保持原生语义与键盘可达性视觉上由轨道 滑块构成off 时滑块居左且轨道为灰色on 时滑块居右且轨道、滑块染上主题主色支持单个或成组使用彼此独立选中/取消选中可附加ripple 点击涟漪效果支持初始或编程方式的disabled 禁用态。!-- 未开启的开关 -- label forswitch-2 classmdl-switch mdl-js-switch mdl-js-ripple-effect input typecheckbox idswitch-2 classmdl-switch__input span classmdl-switch__label关闭/span /label !-- 已开启的开关input 带 checked -- label forswitch-1 classmdl-switch mdl-js-switch mdl-js-ripple-effect input typecheckbox idswitch-1 classmdl-switch__input checked span classmdl-switch__label开启/span /label上述两个完整可运行的示例分别对应仓库中的 src/switch/snippets/switch-off.html 与 src/switch/snippets/switch-on.html。四步构建一个 MDL Switch按 src/switch/README.md 给出的步骤从零搭建开关组件只需四步。核心原则是始终用label包裹原生 checkbox并把 MDL 增强类挂在对应的标签、输入框和说明文字上这样即使 JS 未加载原生复选框依然可用渐进增强。第 1 步编写label元素并设置for属性其值等于将要包含的开关的idlabel forswitch1 ... /label第 2 步在 label 内部编写input元素type为checkboxid与 label 的for保持一致label forswitch1 input typecheckbox idswitch1 /label第 3 步在 checkbox 之后编写span元素作为开关的文字说明captionlabel forswitch1 input typecheckbox idswitch1 spanSound off/on/span /label第 4 步为 label、input、span 添加 MDL 类名用空格分隔的多个类label forswitch1 classmdl-switch mdl-js-switch input typecheckbox idswitch1 classmdl-switch__input span classmdl-switch__labelSound off/on/span /label完成后组件即可直接使用。原文档还给出了带涟漪点击效果的完整示例label forswitch1 classmdl-switch mdl-js-switch mdl-js-ripple-effect input typecheckbox idswitch1 classmdl-switch__input span classmdl-switch__labelSound off/on/span /label标记要点for/id配对不是装饰它让点击 label 任意位置包括说明文字都能切换复选框也保证屏幕阅读器能正确朗读mdl-js-switch是升级触发器组件注册后MDL 的componentHandler会扫描 DOM 中带该类的元素并执行升级向 label 内动态注入轨道、滑块等视觉节点详见下文源码分析不要忘记给mdl-switch__label填充实际文字否则视觉上只剩轨道与滑块可参照 snippets 目录中的示例结构。配置选项五个 MDL 类的职责与放置位置下表完整摘录自 src/switch/README.md 的配置说明列出了全部可用类及其作用MDL 类作用备注mdl-switch将 label 定义为 MDL 组件必须加在 label 元素上mdl-js-switch为 label 赋予基础的 MDL 行为触发升级必须加在 label 元素上mdl-switch__input将基础 MDL 行为应用到开关本体必须加在 input 元素复选框上mdl-switch__label将基础 MDL 行为应用到说明文字必须加在 span 元素caption上mdl-js-ripple-effect启用涟漪点击效果可选加在 label 元素上而非 input 元素开关上注意事项mdl-js-ripple-effect只加在 label 上同时组件会以编程方式在内部追加涟漪容器渲染时配合 src/ripple/ripple.js 与 src/ripple/_ripple.scss 产生点击波纹缺任何一个必需类都会导致样式或行为不完整例如只加mdl-switch不加mdl-js-switch时原生复选框会直接显示不会被升级成视觉开关。禁用状态文档同时强调所有开关形态都提供禁用版本通过标准 HTML 布尔属性disabled触发input typecheckbox idswitch5 classmdl-switch__input disabled该属性既可以在标记中静态声明也可以通过脚本编程式地添加或移除。结合源码看禁用状态会被同步为 label 上的is-disabled状态类进而触发_switch.scss中灰化轨道与滑块、取消指针光标cursor: auto的样式。源码视角升级过程与状态同步原理组件注册与升级入口src/switch/switch.js 定义MaterialSwitch构造器并通过 MDL 组件设计模式注册componentHandler.register({ constructor: MaterialSwitch, classAsString: MaterialSwitch, cssClass: mdl-js-switch, widget: true });cssClass: mdl-js-switch即升级触发器当componentHandler.upgradeElement检测到元素带有mdl-js-switch类时就会实例化MaterialSwitch并挂到元素的MaterialSwitch属性上对应测试中$(el).data(upgraded, ,MaterialSwitch)的断言。init动态注入视觉节点init()src/switch/switch.js 的init方法会通过querySelector(.mdl-switch__input)找到复选框然后用 JavaScript 动态创建轨道mdl-switch__track、滑块mdl-switch__thumb和焦点辅助圆mdl-switch__focus-helper追加在滑块内部var track document.createElement(div); track.classList.add(this.CssClasses_.TRACK); var thumb document.createElement(div); thumb.classList.add(this.CssClasses_.THUMB); var focusHelper document.createElement(span); focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER); thumb.appendChild(focusHelper); this.element_.appendChild(track); this.element_.appendChild(thumb);如果 label 包含mdl-js-ripple-effect还会额外创建mdl-switch__ripple-container与mdl-ripple节点并注入 label。最后在inputElement_上监听change、focus、blur在 label 上监听mouseup并调用updateClasses_()、追加is-upgraded类。注意升级后的原生 input 会被 CSS 隐藏opacity: 0、宽高为 0但仍参与焦点与表单交互见 _switch.scss 中.mdl-switch.is-upgraded 规则——这正是视觉隐藏、语义保留的关键设计。状态如何同步到视觉核心是updateClasses_()src/switch/switch.js 的updateClasses_方法它依次调用两个公开方法checkDisabled()读取inputElement_.disabled有则给 label 加is-disabled否则移除checkToggleState()读取inputElement_.checked为真则加is-checked否则移除。is-checked状态类驱动_switch.scss中的颜色与位置变换——滑块从left: 0动画滑到left: $switch-track-length - $switch-thumb-size即 36px − 20px 16px轨道与滑块背景色切换为主色阴影由shadow-2dp升为shadow-3dp动画时长 0.28s.mdl-switch__thumb { include material-animation-default(0.28s); transition-property: left; .mdl-switch.is-checked { background: $switch-thumb-color; left: $switch-track-length - $switch-thumb-size; include shadow-3dp(); } }这段样式位于 src/switch/_switch.scss尺寸与颜色常量集中在 src/_variables.scss变量默认值含义$switch-track-length36px轨道长度$switch-track-height14px轨道高度$switch-thumb-size20px滑块直径$switch-label-height24px标签行高$switch-ripple-size48px2×24px涟漪容器直径$switch-thumb-color/$switch-track-color主题主色$color-primary开启态颜色$switch-off-thumb-colorpalette-grey-50关闭态滑块色$switch-off-track-color黑色 26% 透明度关闭态轨道色$switch-disabled-thumb-colorpalette-grey-400禁用态滑块色$switch-disabled-track-color黑色 12% 透明度禁用态轨道色由于$switch-color派生自全局的$color-primary见 src/_variables.scss 中的$switch-color: rgb(#{$color-primary})开关开启态颜色会自动跟随主题主色无需单独配置。编程式控制公开 API 一览MaterialSwitch暴露了 5 个公开方法src/switch/switch.js升级完成后可通过element.MaterialSwitch直接调用方法作用checkDisabled()依据 input 的disabled属性同步is-disabled状态类checkToggleState()依据 input 的checked属性同步is-checked状态类disable()将 input 置为disabled true并刷新状态类enable()将 input 置为disabled false并刷新状态类on()将 input 置为checked true并刷新状态类off()将 input 置为checked false并刷新状态类典型用法var switchEl document.querySelector(.mdl-switch); // 开启 switchEl.MaterialSwitch.on(); // 禁用 switchEl.MaterialSwitch.disable(); // 读取当前状态input 才是状态的真正持有者 var isOn switchEl.querySelector(.mdl-switch__input).checked;由于on/off直接修改 input 的checked随后触发的change事件会再次调用updateClasses_()保证编程操作与用户点击两条路径最终都收敛到同一套状态同步逻辑。blur_()中为绕开blur 后焦点事件被重新触发的问题而使用window.setTimeout(..., 0.001)的细节见 src/switch/switch.js 的blur_方法也展示了组件对交互边界情况的处理。单元测试行为约定的可验证证据test/unit/switch.js 用 Mocha Chai 固化了组件的核心行为可作为接入时的契约参考MaterialSwitch在全局可用expect(MaterialSwitch).to.be.a(function)componentHandler.upgradeElement(el, MaterialSwitch)后元素带upgraded数据标记给 input 置disabled true并调用checkDisabled()后label 类名变为mdl-switch mdl-js-switch is-upgraded is-disabled给 input 置checked true并调用checkToggleState()后label 类名变为mdl-switch mdl-js-switch is-upgraded is-checked。测试中的createSwitch()构造结构与 README 的标记模板完全一致label input span说明文档、源码与测试三者的标记契约是统一的读者可以放心照抄。小结与实战建议标记即契约mdl-switch、mdl-js-switch、mdl-switch__input、mdl-switch__label四个类缺一不可涟漪类mdl-js-ripple-effect按需附加在 label 上表单友好底层仍是标准 checkboxname/value/checked照常参与表单提交升级后视觉节点由 JS 注入无 JS 时退化回原生复选框状态可控disabled属性支持静态声明与编程增删公开 APIon/off/disable/enable可驱动任意业务逻辑主题联动开启态颜色自动继承主题主色$color-primary尺寸常量可在 src/_variables.scss 中按需覆写。如需查看完整示例可直接运行仓库中 src/switch/snippets/switch-on.html 与 src/switch/snippets/switch-off.html想深入组件注册机制可继续阅读 src/mdlComponentHandler.js 与 src/ripple/ripple.js。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
