Benutzerdefinierter Schalter (Custom Toggle)

Der Custom Toggle ist ein einfaches, intuitives Steuerelement zum Umschalten zwischen zwei Zuständen: Ein und Aus.
Ideal zur Steuerung von Systemkomponenten – z. B. zum Aktivieren/Deaktivieren einzelner Funktionen oder Geräte wie Lüfter.

Überblick

Der benutzerdefinierte Schalter ermöglicht einen klar erkennbaren, schnellen Zustandwechsel.
Er kann zur Steuerung von Geräten, Prozessen oder UI-Zuständen eingesetzt werden und zeigt den aktuellen Status visuell an.

Hauptfunktionen

Zwei-Zustands-Schaltung

Schaltet zwischen Ein und Aus
Beide Zustände sind visuell unterscheidbar (Farbe, Symbol)

Echtzeit-Rückmeldung

Der aktuelle Status wird sofort reflektiert

Benutzerdefinierte Beschriftungen

Optional können Beschriftungen für beide Zustände definiert werden (z. B. „Lüfter EIN“, „Lüfter AUS“)

Anpassbare Darstellung

Farbe, Größe und Stil sind anpassbar, um zum Design zu passen

Visuelles Feedback bei Wechsel

Beim Umschalten können optische oder akustische Rückmeldungen eingebunden werden

Anwendungsfälle

Systemsteuerung

Beispiel: Ein- und Ausschalten eines Geräts wie Lüfter oder Motor

Sicherheitsfunktionen

Beispiel: Aktivieren/Deaktivieren von Not-Aus oder Sicherheitsabschaltungen

Gerätesteuerung

Beispiel: Ein Gerät oder System aus der Ferne ein- oder ausschalten

SVG ID Referenztabelle

#	Element	SVG ID
1	Zustand AUS	`groupOff`
2	Zustand EIN	`groupOn`
3	Schieberegler (Thumb)	`thumb`
4	Beschriftung EIN (optional)	`labelOn`
5	Beschriftung AUS (optional)	`labelOff`
6	Root-Klasse	`custom_control_root`

Beispiel-Codeausschnitt

<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>

Inhaltsangabe: