Pages
Benutzerdefinierter Schalter (Custom Switch)
Der Custom Switch ist ein vielseitiges Steuerelement, das dem Benutzer erlaubt, zwischen drei unterschiedlichen Zuständen zu wechseln.
Ideal geeignet für Systeme oder Geräte, bei denen ein Mittelzustand erforderlich ist – z. B. zur Auswahl zwischen „Niedrig“, „Mittel“ und „Hoch“ oder zum Aktivieren mehrerer Betriebsmodi.
Übersicht
Der Custom Switch ermöglicht das Durchlaufen von drei vordefinierten Zuständen und bietet dadurch mehr Flexibilität als ein herkömmlicher Ein/Aus-Schalter.
Jeder Zustand ist visuell dargestellt, sodass Benutzer schnell den aktiven Status erkennen und zwischen den Zuständen umschalten können.
Hauptfunktionen
Drei-Zustands-Schalter
- Schaltet zwischen drei Zuständen (z. B. Niedrig, Mittel, Hoch oder Aus, Standby, Ein)
- Jeder Zustand ist optisch eindeutig durch Farben, Symbole oder Beschriftungen gekennzeichnet
Echtzeit-Zustandsanzeige
- Der aktuelle Zustand wird sofort visuell angezeigt und bietet direkte Rückmeldung
Anpassbare Darstellung
- Farben, Größe und Stil des Schalters können individuell angepasst werden – passend zum Systemdesign
Feedback beim Umschalten
- Beim Wechsel zwischen Zuständen können visuelle, akustische oder haptische Rückmeldungen eingebunden werden
Anwendungsfälle
Systemmodi
- Beispiel: Umschalten zwischen verschiedenen Betriebsarten eines Geräts wie Niedrig-, Mittel- oder Hochleistung
Mehrstufige Steuerung
- Beispiel: Steuerung von Intensitätsstufen bei Licht, Klimaanlage oder Heizung mit drei festen Werten
Gerätesteuerung
- Beispiel: Durchlauf von drei Betriebszuständen einer Maschine – Aus, Standby, Ein
SVG ID Referenztabelle
[img_1]
| # | Element | SVG ID |
|---|---|---|
| 1 | Zustand 1 | [code_block_0] |
| 2 | Zustand 2 | [code_block_1] |
| 3 | Zustand 3 | [code_block_2] |
| 4 | Schieberegler (Thumb) | [code_block_3] |
Codebeispiel
[code_block_4]# **Custom Switch** The **Custom Switch** control is a versatile widget that allows users to toggle between three distinct states. It is ideal for controlling systems or devices that require a middle state, such as selecting between low, medium, and high settings or enabling multiple system modes.   ## **Overview** The **Custom Switch** enables users to cycle through three predefined states, providing more flexibility than a typical toggle. Each state is visually represented, ensuring users can quickly identify and switch between them. ## **Key Features** ### **Three-State Switch** - Toggle between **three** states (e.g., Low, Medium, High, or Off, Standby, On). - Each state is clearly indicated with distinct colors, icons, or labels. ### **Real-Time State Reflection** - The switch immediately reflects the current state, giving users visual feedback for better interaction. ### **Configurable Appearance** - Adjust the switch’s appearance, including colors, size, and style, to match the system’s theme or design. ### **State Change Feedback** - Provide visual, auditory, or haptic feedback when switching between states to improve the user experience. ## **Use Cases** ### **System Modes** - Example: Switch between different modes of a device, such as Low, Medium, and High power settings. ### **Multi-Level Controls** - Example: Control intensity levels in systems like lighting, air conditioning, or heating with three distinct settings. ### **Device Management** - Example: Cycle through three operational states of a machine, such as Off, Standby, and On. ## **SVG ID Reference Table**  | **#** | **Element** | **SVG ID** | |------:|-----------------------------------|--------------------------| | 1 | State 1 | `gState1` | | 2 | State 2 | `gState2` | | 3 | State 3 | `gState3` | | 4 | Thumb | `thumb` | ## **Code Snippet Example** ```