← Alle Beiträge

Aktionstypen

TOGGLE3: ein 3-Zustands-Segmentschalter in der Aktionsleiste — Dev/Staging/Prod, Hell/Dunkel/Auto

15 Mai 2026 · von JustZix Team

Ein Button ist „Klick → ausführen". Ein Select ist „wähle eins von N". Was ist mit „drei bekannten Zuständen" — weil du Dev/Staging/Prod hast, oder Hell/Dunkel/Auto, oder Aus/Standard/Erzwingen? Das ist TOGGLE3 (seit v2.13.25) — ein 3-Zustands-Segmentschalter mit einer eigenen Farbe pro Zustand und JS-Code, der beim Zustandswechsel feuert.

Warum ein eigener Typ und nicht select / button?

Drei Zustände passen perfekt in das Muster eines „iOS-Segmentschalters" — alle 3 gleichzeitig sichtbar, einer ist aktiv, ein Klick auf einen anderen tauscht den aktiven Zustand. Kein Dropdown, keine Überraschungen. Klassische Mobile-UX.

Erste TOGGLE3-Aktion — Hell / Dunkel / Auto

Füge der Aktionsleiste eine TOGGLE3-Aktion mit 3 Zuständen hinzu:

states[0] = { label: 'Hell', value: 'light' }
states[1] = { label: 'Auto', value: 'auto'  }
states[2] = { label: 'Dunkel', value: 'dark' }
defaultStateIdx: 1   // Auto beim ersten Besuch

Im Code-Feld:

// `value`, `stateIdx`, `stateLabel` werden als const vor deinem Code injiziert.
const html = document.documentElement;
if (value === 'light') {
  html.style.colorScheme = 'light';
  html.removeAttribute('data-theme');
} else if (value === 'dark') {
  html.style.colorScheme = 'dark';
  html.setAttribute('data-theme', 'dark');
} else {
  html.style.colorScheme = '';
  html.removeAttribute('data-theme');
}
JUSTZIX.log(`Theme → ${stateLabel} (idx ${stateIdx})`);

Klick auf „Dunkel" → die Aktion ändert das HTML, Klick auf „Hell" → der Code feuert erneut mit einem neuen Wert. Der aktive Zustand hat die volle Farbe (aus action.color), die inaktiven sind gedimmt (aus colorInactiveText).

5 Farben — jeder Zustand bekommt seine eigene visuelle Identität

Seit v2.13.32 hat TOGGLE3 5 konfigurierbare Farben (mehr als jeder andere Aktionstyp):

Anwendungsfall: Dev/Staging/Prod, wobei jeder aktive Zustand seine eigene semantische Farbe hat (grün / bernstein / rot), aber der Wrap-Hintergrund und der inaktive Text neutral bleiben, damit sie sich nicht vermischen. Ein roter „Prod"-Zustand sticht visuell hervor — genau das ist der Sinn.

Anwendungsfall 1 — Umgebungswechsler Dev/Staging/Prod

Du hast eine App mit 3 Umgebungen unter denselben Pfaden. Bisher: manuelles URL-Bearbeiten oder Lesezeichen. TOGGLE3 mit Code:

// Jeder Zustand hat value = Subdomain
states[0] = { label: 'DEV',  value: 'dev.app.com' }     // color: grün
states[1] = { label: 'STG',  value: 'staging.app.com' } // color: bernstein
states[2] = { label: 'PROD', value: 'app.com' }         // color: rot

// Code:
const newHost = value;
const path = location.pathname + location.search;
location.href = `https://${newHost}${path}`;

Klick auf „PROD" → du springst zur Produktion und behältst Pfad + Query. Das Memory hält den aktiven Zustand, sodass du nach dem Neuladen in derselben Umgebung landest (defaultStateIdx wirkt nur als Fallback beim ersten Aufruf — das Memory gewinnt).

Anwendungsfall 2 — Feature-Flag mit drei Zuständen

Deine App liest ein Feature-Flag aus dem localStorage. Drei realistische Zustände: „Aus" (force-off), „Standard" (servergesteuert), „Erzwingen".

states[0] = { label: 'AUS',     value: 'off'     }
states[1] = { label: 'STANDARD', value: 'default' }
states[2] = { label: 'FORCE',   value: 'force'   }

// Code:
if (value === 'default') {
  localStorage.removeItem('ff_newCheckout');
} else if (value === 'off') {
  localStorage.setItem('ff_newCheckout', 'false');
} else {
  localStorage.setItem('ff_newCheckout', 'true');
}
location.reload();  // Beim Neuladen anwenden
JUSTZIX.log(`Feature-Flag → ${stateLabel}`);

QA-Szenario: in 2 Sekunden ein Feature-Flag umschalten, die Ansicht prüfen, auf Standard zurücksetzen. Alles ohne Entwickler und ohne DevTools-Konsole.

Anwendungsfall 3 — aus einer anderen Aktion per JZ.setValue steuern

Du hast TOGGLE3 „Theme" (Hell/Auto/Dunkel). Und eine zweite BUTTON-Aktion „🌙 Nachtmodus" in einer anderen Leiste, die ein Skript sein soll, das Dunkel setzt + Banner ausblendet + die Schriftgröße verringert:

// BUTTON "Nachtmodus" — Code:
JZ.setValue('Theme', 'dark');   // → aktiviert Zustand idx 2 + führt seinen Code aus
document.body.style.fontSize = '14px';
document.querySelectorAll('.cookie-banner, .promo')
  .forEach(el => el.style.display = 'none');
JUSTZIX.log('Nachtmodus aktiviert.');

Funktioniert nach Wert — JZ.setValue('Theme', 'dark') findet den Zustand mit value='dark'; oder nach Label — JZ.setValue('Theme', 'Dunkel') case-insensitive; oder numerisch — JZ.setValue('Theme', 2). Alle Wege konvergieren auf denselben Zustand.

Fallstricke

• states.length muss GENAU 3 sein. Die Prüfung isValidAction() lehnt die Aktion ab, wenn das Array kleiner/größer ist. Brauchst du 2 Zustände? Nutze SELECT static mit 2 Optionen oder einen BUTTON-Toggle. Brauchst du 4+? Nutze SELECT static.
• Der Wert in einem Zustand ist optional — fällt auf state.label zurück. Empfohlen: nutze einen kurzen symbolischen Wert (wie 'dev'/'stg'/'prod'), weil Labels Leerzeichen oder Unicode-Zeichen enthalten können.
• Das Memory speichert den INDEX (0/1/2), nicht den Wert. Wenn du die Zustände später umordnest — landen Nutzer mit vorherigem Memory in einem anderen Zustand. Best Practice: ordne die Zustände in einer bestehenden Aktion nicht um.
• defaultStateIdx gilt nur beim ersten Aufruf. Wenn der Nutzer die Aktion bereits genutzt hat, gewinnt das Memory — selbst wenn du defaultStateIdx im Editor später änderst, sehen bestehende Nutzer weiterhin ihren vorherigen Zustand.
• Label max. 5 Zeichen im UI-Editor. Der Renderer akzeptiert längere Werte, aber das schmale Segmentschalter-Format verlangt Kürze.

Was kommt als Nächstes

TOGGLE3 ist der Aktionstyp mit der reichsten „UX-Identität" — Farben pro Zustand, Persistenz, eingebauter Scope für 3-Zustands-Entscheidungen. Sieh dir auch die window.JZ-Helfer für programmatische Zustandssteuerung aus anderen Aktionen an und die DEV/STG/PROD-CSS-Marker als visuellen Begleiter für den Umgebungswechsler.

Installiere JustZix — völlig kostenlos, kein Server, kein Konto.