Pages

自定义开关（Custom Toggle）

Custom Toggle（自定义开关） 是一个简单直观的控件，用于在两个状态之间切换（开启/关闭）。
它非常适用于控制系统组件，例如启用或禁用某个模块，或远程控制设备如风扇。

概述

Custom Toggle 提供了清晰而灵敏的开关交互方式，用于控制系统、设备或流程，当前状态会以视觉方式反馈给用户。

核心特性

双状态开关

• 在 开启（on） 与 关闭（off） 状态之间切换
• 每个状态都可通过不同的颜色或图标区分表示

实时状态反映

• 开关会立即反映当前状态，提供及时反馈

自定义标签

• 可为每个状态添加自定义标签（例如“风扇已开启”、“风扇已关闭”）
• 可根据应用需求调整文本或图标

可配置外观

• 可调整开关的颜色样式、尺寸与整体风格，以匹配系统界面设计

状态变化反馈

• 可添加视觉或声音提示，提升用户交互体验

典型应用场景

系统控制

• 示例：开启或关闭机器或设备，如启动/关闭风扇

安全机制

• 示例：启用或禁用紧急停止功能或系统关闭控制

设备管理

• 示例：远程控制设备的开关状态

SVG ID 参考表

示例代码片段

<g id="gOFF">
<rect class="fallback-toggle-off-background custom-control custom-toggle-off custom-toggle-background-off" id="Rectangle 1" x="1.5" y="1.5" width="70" height="35" rx="17.5" stroke-width="3"/>
<g id="thumb">
<g class="fallback-toggle-off-thumb custom-control custom-toggle-off custom-toggle-thumb-off" id="circle" filter="url(#filter0_d_286_438)">
<circle cx="19" cy="19" r="13"/>
<circle cx="19" cy="19" r="12.5" stroke="url(#paint0_linear_286_438)"/>
</g>
</g>
<text  fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="12" letter-spacing="0em"><tspan id="labelOff" x="82" y="24.8636">Label Off</tspan></text>

</g>
<g id="gON">
<rect class="fallback-toggle-on-background custom-control custom-toggle-on custom-toggle-background-on" id="Rectangle 2" x="1.5" y="1.5" width="70" height="35" rx="17.5" stroke-width="3"/>
<g class="fallback-toggle-on-thumb custom-control custom-toggle-on custom-toggle-thumb-on" id="thumb">
<g id="circle_2" filter="url(#filter1_d_286_438)">
<circle cx="54" cy="19" r="13"/>
<circle cx="54" cy="19" r="12.5" stroke="url(#paint1_linear_286_438)"/>
</g>
</g>